jQuery slideDown 设置高度和溢出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9036015/
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
jQuery slideDown with set height and overflow
提问by stergosz
I have the following HTML code
我有以下 HTML 代码
<div class="text">bla bla bla bla</div>
<div class="button">Show</div>
And the CSS
和 CSS
.text{
height:100px;
overflow:hidden;
}
Assume .textdivhas way more text and what I do is hide the amount of text below 100px.
假设.textdiv有更多的文字，我所做的是隐藏低于 100 像素的文字量。
How can I slideDown()the divso I can view the text when I click the button?
我怎样才能slideDown()在div这样我就可以查看文本，当我点击按钮？
Using $(".button").slideDown();doesn't work because I need to remove the height and then slideDown()but this will not work either.
使用$(".button").slideDown();不起作用，因为我需要删除高度然后slideDown()但这也不起作用。
采纳答案by ShankarSangoli
Try this it is very simple and easy without creating any clone.
试试这个，它非常简单和容易，无需创建任何克隆。
$(function(){
$(".button").click(function(){
var $text = $(".text");
var contentHeight = $text
.addClass('heightAuto').height();
$text.removeClass('heightAuto').animate({
height: (contentHeight == $text.height() ? 100 : contentHeight)
}, 500);
});
});
Added a new class
添加了一个新类
.heightAuto{
height:auto;
}
回答by Eric Bieller
I like Shankar's solution but the functionality breaks down after the first two clicks.. This is because the auto class gets overwritten by the inline height style. So instead I altered the height attribute only.
我喜欢 Shankar 的解决方案，但在前两次点击后功能会崩溃。这是因为自动类被内联高度样式覆盖。所以我只改变了高度属性。
Here's my go at it:
这是我的做法：
$(".button").click(function(){
$box = $(".text");
minimumHeight = 100;
// get current height
currentHeight = $box.height();
// get height with auto applied
autoHeight = $box.css('height', 'auto').height();
// reset height and revert to original if current and auto are equal
$box.css('height', currentHeight).animate({
height: (currentHeight == autoHeight ? minimumHeight : autoHeight)
})
});
One flaw is that if you add padding to the box you get some ugly jumping. Open to any solutions to fix that.
一个缺陷是，如果您向框添加填充，则会出现一些难看的跳跃。打开任何解决方案来解决这个问题。
Improvements and suggestions are very welcome
非常欢迎改进和建议
回答by Kato
Clean but expensive option: Use animate directly instead of slideDown(). Determine the height you want to animate to by creating a clone and setting the height to auto.
干净但昂贵的选项：直接使用 animate 而不是 slideDown()。通过创建克隆并将高度设置为自动来确定要设置动画的高度。
$('.button').click(function() {
var $div = $('div.text');
$div.animate({height: determineActualHeight($div)});
});
// if you can determine the div's height without this, it would be faster
// what makes this expensive is inserting and removing an element from the dom
// of course, you aren't doing this a thousand times a second, so it's probably no biggie
function determineActualHeight($div) {
var $clone = $div.clone().hide().css('height', 'auto').appendTo($div.parent()),
height = $clone.height();
$clone.remove();
return height;
}
A little uglier but less expensive option: just set the height to auto, hide the element, then use slideDown() to render it:
一个更丑但更便宜的选项：只需将高度设置为自动，隐藏元素，然后使用 slideDown() 来渲染它：
$('.button').click(function() {
$('div.text').hide().css('height', 'auto').slideDown();
}
回答by Jeremy Miller
I just totally misread your question.
我只是完全误读了你的问题。
Unfortunately, you can't really set to auto height. But you can animate to a set height, using .animate();
不幸的是，您无法真正设置为自动高度。但是您可以使用 .animate(); 将动画设置为设置的高度。
.animate({height:'200px'};
.animate({height:'200px'};
slideUp()'and .slideDown();set the divs to display: noneand display: blockSo you're right, that wouldn't work for what you're trying to do.
slideUp()'并将.slideDown();div 设置为display: noneanddisplay: block所以你是对的，这对你想要做的事情不起作用。
EDIT
编辑
I just saw Kato's post. That's probably the best option for you.
我刚看到加藤的帖子。这可能是你最好的选择。
回答by WebDataIntel
Shankar and Erik's solutions are on the right track. Erik fixed Shankar's problem of only working twice. Now I'm going to fix Erik's problem of having padding:
Shankar 和 Erik 的解决方案走在正确的轨道上。Erik 解决了 Shankar 只工作两次的问题。现在我要解决 Erik 的填充问题：
$(function(){
$(".arrow-details").click(function(e){
var id = "#other-" + e.target.id;
var $box = $(id);
minimumHeight = 350;
currentHeight = $box.outerHeight();
autoHeight = $box.css('height', 'auto').outerHeight();
$box.css('height', currentHeight).animate({
height: (currentHeight == autoHeight ? minimumHeight : autoHeight)
})
});
})
Basically, I took Erik's jsfiddle and changed innerHeight to outerHeight.
基本上，我拿了 Erik 的 jsfiddle 并将innerHeight 更改为outerHeight。
I also had several divs on my page where the height can change, so instead of hard coding which div gets changed, the impacted divis now determined by the ID of the button/image/div the user clicks on.
我的div页面上也有几个高度可以改变的 s，所以不是硬编码哪个 div 被改变，受影响div的现在由用户点击的按钮/图像/div 的 ID 决定。
回答by GusDeCooL
use scrollHeight property, this can make your script dynamic.
使用 scrollHeight 属性，这可以使您的脚本动态化。
$('.button').click(function() {
$('.text').animate({ 'height': $('.text')[0].scrollHeight }, 1000);
});
