我有以下 HTML 代码
<div class="text">bla bla bla bla</div>
<div class="button">Show</div>
还有 CSS
.text{
height:100px;
overflow:hidden;
}
假设 .text div 有更多的文字，而我所做的是将文字数量隐藏在 100 像素以下。
我如何slideDown()div 以便在单击按钮时查看文本？
使用$(".button").slideDown(); 不起作用，因为我需要删除高度然后slideDown() 但这也不起作用。
【问题讨论】：
我喜欢 Shankar 的解决方案，但功能在前两次单击后就崩溃了。这是因为 auto 类被内联高度样式覆盖。所以我只改变了 height 属性。
这是我的尝试：
$(".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)
})
});
一个缺陷是，如果你给盒子添加填充，你会得到一些难看的跳跃。愿意接受任何解决方案来解决这个问题。
非常欢迎改进和建议
【讨论】：
试试这个，非常简单，无需创建任何克隆。
$(function(){
$(".button").click(function(){
var $text = $(".text");
var contentHeight = $text
.addClass('heightAuto').height();
$text.removeClass('heightAuto').animate({
height: (contentHeight == $text.height() ? 100 : contentHeight)
}, 500);
});
});
添加了一个新类
.heightAuto{
height:auto;
}
【讨论】：
height: auto 时会出现的“昙花一现”会更加明显。这是因为 CSS 直到函数返回（即准线程）才被渲染？
height: auto 时，浏览器不会渲染它或计算新大小。然后在调用height() 时计算大小。由于height: 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;
}
一个更丑但更便宜的选项：只需将高度设置为自动，隐藏元素，然后使用 slideDown() 来渲染它：
$('.button').click(function() {
$('div.text').hide().css('height', 'auto').slideDown();
}
【讨论】：
我完全误解了你的问题。
很遗憾，您不能真正设置为自动高度。但是您可以使用 .animate(); 动画到设定的高度；
.animate({height:'200px'};
slideUp()' 和 .slideDown(); 将 div 设置为 display: none 和 display: block 所以你是对的，这不适合你想要做的事情。
编辑
我刚看到加藤的帖子。这可能是您的最佳选择。
【讨论】：
height: auto 与 .slideDown(); 一起使用 - 它不是默认为 display: none 吗？另外，我不知道你可以做到.animate(); 到height: auto 哈，我当然不是 jQuery 大师，所以我还有很长的路要走。
使用 scrollHeight 属性，这可以使您的脚本动态化。
$('.button').click(function() {
$('.text').animate({ 'height': $('.text')[0].scrollHeight }, 1000);
});
【讨论】：
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)
})
});
})
基本上，我拿了 Erik 的 jsfiddle 并将 innerHeight 更改为 outerHeight。
我的页面上还有几个divs，高度可以更改，因此受影响的div现在由用户的按钮/图像/div的ID确定，而不是硬编码更改哪个div点击。
【讨论】：