0

This question is based on my previous question which I got a working answer to, but only for one slidetoggle element: link

I use the animate method to have the "hidden" elements loaded in the background. Otherwise I could just use slidetoggle, but this leads to a display:none which I don't want.

So, here's the function I got so far, but it only runs once for each 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);    

     });
});​

​Could it be a problem to get the height set to auto again? I just can't find the trick.

Here's also fiddle: jsfiddle

4

3 回答 3

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/

于 2012-06-29T19:25:12.087 回答
1

为了克服你的问题，设置overflow:hiddenif height is 0。

参考现场演示

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);
        });
});​
于 2012-06-29T20:19:06.973 回答
0

因为您第一次将高度设置为 0，所以下次它为零，所以 .height() 值返回零。

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

于 2012-06-29T19:11:31.470 回答