javascript 使用 jQuery 扩展 DIV 时将高度设置为自动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9166778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set height as auto on expanding DIV with jQuery
提问by ios85
I am trying to set the height of a DIV to auto when I expand it, but when ever I do just '' it shrinks it down, or when I do 'auto' it does nothing. How do I get it to change the height to auto? I have content that will be all different heights and dont want to have to pass in a height parameter every time I set one of these up .This is what I have that is not working properly. The DIV will start out at a static height then needs to expand to expose all of the text in the DIV.
我试图在展开时将 DIV 的高度设置为自动，但是每当我这样做时，它就会将其缩小，或者当我执行“自动”时，它什么也不做。我如何让它将高度更改为自动？我的内容将是所有不同的高度，并且不想每次设置其中一个时都必须传入高度参数。这就是我所拥有的无法正常工作的内容。DIV 将从静态高度开始，然后需要扩展以显示 DIV 中的所有文本。
My jsFiddle: http://jsfiddle.net/gNsrG/
我的 jsFiddle：http: //jsfiddle.net/gNsrG/
This is my jQuery code:
这是我的 jQuery 代码：
function changeheight(_this) {
var thisText = $(_this).text() ;
if (thisText == 'more') {
$('#overviewtext').animate({
'height': ''
}, 600);
$(_this).text((thisText == 'more') ? 'less' : 'more');
}
else if (thisText == 'less') {
$('#overviewtext').animate({
'height': '150px'
}, 600);
$(_this).text((thisText == 'more') ? 'less' : 'more');
}
return false;
};
回答by Henesnarfel
You shouldn't have to change the height ever. You should just be using JQuery's slidedown and slideup
你不应该改变高度。您应该只使用 JQuery 的向下滑动和向上滑动
I've made some changes to you example on jsfiddle
我在jsfiddle上对你的例子做了一些改变
EDIT
编辑
I misunderstood what the question was. You want some text to show then you click more and more text shows. Then click less and less text shows. I've accomplished this but it is a bit hacky. Apparently JQuery doesn't do well with animating auto and percentages. Basically is what I did is when you click more. I stored the current height. Temporarily changed it to auto which makes it fully open. Got that height. Changed it back to closed (Hopefully the user doesn't see this). Then took that height and used it for the animate. I'm hoping there is an easier way but right now I can't find it.
我误解了问题是什么。您想要显示一些文本，然后单击越来越多的文本显示。然后点击越来越少的文字显示。我已经完成了这个，但它有点hacky。显然 JQuery 在动画自动和百分比方面做得不好。基本上我所做的是当你点击更多时。我存储了当前的高度。暂时将其更改为自动，使其完全打开。到了那个高度。将其改回关闭（希望用户看不到这一点）。然后取那个高度并将其用于动画。我希望有一种更简单的方法，但现在我找不到它。
My example is here jsfiddle
我的例子在这里jsfiddle
The only other way I can think of to accomplish this is to have an inner div that contains all the "MORE" text that you slidedown and slideup on but you would have to be able to differentiate where the cutoff was for the more text.
我能想到的唯一另一种方法是拥有一个内部 div，其中包含您向下滑动和向上滑动的所有“更多”文本，但您必须能够区分更多文本的截止位置。
回答by dfsq
Improved code:
改进的代码：
function changeheight(_this) {
$('#overviewtext').slideToggle(600);
$(_this).text($(_this).text() == 'more' ? 'less' : 'more');
return false;
};
Demo here http://jsfiddle.net/gNsrG/3/
回答by Will P.
you can change an element's css using .css(), in this case it would look like
您可以使用 .css() 更改元素的 css，在这种情况下，它看起来像
$('#overviewtext').css('height', 'auto');
you might try adding that line after the animate call.
您可以尝试在 animate 调用后添加该行。
回答by Lucas Pretti
I had a similar problem and my solution was to use JqueryUI which animate classes on toggle when clicking in the actual text
我有一个类似的问题，我的解决方案是使用 JqueryUI，它在单击实际文本时为切换类设置动画
jQuery ("#box_description_texts p").click(function() {
jQuery(this).toggleClass("box_text_expanded", 250);
});
and in the CSS
并在 CSS 中
#box_description_texts p.box_text_expanded {height: auto;}
