Question

这个问题基于我之前的问题，我得到了一个有效的答案，但只针对一个slidetoggle元素：link

我使用animate方法在后台加载“隐藏”元素。否则我可以使用slidetoggle，但这会导致显示：none，我不想要。

所以，这是我到目前为止所获得的功能，但它只为每个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;
}

SCRIPT：

$(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);    

     });
});

将高度再次设置为自动可能会出现问题吗？我找不到诀窍。

这里也是小提琴：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

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

参考 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

因为你第一次将高度设置为0，所以下次它为零，所以.height（）值返回零。

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

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

3 个答案:

JS：