独立jquery切换动画高度每次只运行一次

Question

这个问题基于我之前的问题，我得到了一个有效的答案，但仅限于一个滑动切换元素：link

我使用 animate 方法在后台加载“隐藏”元素。否则我可以只使用滑动切换，但这会导致显示：没有我不想要的。

所以，这是我目前得到的函数，但它只为每个 h2 运行一次。

HTML：

<h2>Show</h2>
    <div class="content">
        text text text
        <br />
        text text text
        <br />
        text text text
    </div>

<h2>Show</h2>
    <div class="content">
        text text text
        <br />
        text text text
        <br />
        text text text
    </div>

CSS：

.content {
  height: 0;
  overflow: hidden;
}

.heightAuto {
    height: auto;
}​

脚本：

$(function(){  

    $("h2").toggle(function()

     {    
       var $content = $(this).next(".content");
       var contentHeight = $content.addClass('heightAuto').height();
       $content.removeClass('heightAuto');

       $content.removeClass('heightAuto').animate({ height: contentHeight}, 500);

     }, function() {

        $(this).next(".content").animate({ height: "0"}, 500);    

     });
});​

​再次将高度设置为自动会不会有问题？我就是找不到诀窍。

这也是fiddle：jsfiddle

Answer 1

添加一个不会调整大小的额外包装器：

<div class="content"><div class="inner">
    text text text
    <br />
    text text text
    <br />
    text text text
</div></div>

然后使用这个JS：

jQuery(function($) {  
    $('h2').toggle(function() {
        var $content = $(this).next('.content');
        $content.animate({ height: $content.find('> .inner').height() }, 500);
    }, function() {
        $(this).next('.content').animate({ height: 0 }, 500);       
    });
});

编辑：如果您不想在 HTML 中使用额外的包装器，您可以让 JS 为您添加一个包装器：

jQuery(function($) {  
    $('h2').toggle(function() {
        var $content = $(this).next('.outer');
        $content.animate({ height: $content.find('> .content').height() }, 500);
    }, function() {
        $(this).next('.outer').animate({ height: 0 }, 500);       
    }).next('.content').wrap('<div class="outer" style="height:0;overflow:hidden"></div>');
});​

如果您使用这种方法，您应该删除 .content 块的 CSS。查看更新的小提琴：http://jsfiddle.net/QwmJP/21/

Answer 2

为了解决您的问题，如果高度为 0，请设置 overflow:hidden。

参考LIVE DEMO

JS：

$(function(){
    $("h2").toggle(
        function() {    
            var $content = $(this).next(".content");
            var contentHeight = $content.addClass('heightAuto').height();
            if (contentHeight == 0) {
                contentHeight = $content.attr({
                    style:'overflow:hidden'
                }).height(); 
            }            
            $content.removeClass('heightAuto').animate({ height: contentHeight}, 500);
        }, 
        function() {
            $(this).next(".content").animate({height:0}, 500);
        });
});​

Answer 3

因为你第一次设置height为0，所以下次设置为0，所以.height()值返回0。

改用 offsetHeight 属性：它始终是内容的自然高度。