jQuery slideUp / slideDown动画无法运行

Question

我正在尝试创建两个带有标题和内容的div，当我点击标题时，内容应该向上滑动以隐藏自己。

你可以在JSFiddle中找到我的代码。

我的HTML代码:

<div id="left-content">
    <div class="news-block">
        <div class="block-head">News membres</div>
        <div class="block-content"></div>
    </div>
    <div class="news-block">
        <div class="block-head">News premium & VIP</div>
        <div class="block-content"></div>
    </div>
</div>

我的JavaScript代码如下：

jQuery(document).ready(function($){
    $('div.news-block').on('click', '.block-head', function(){
        var content = $(this).parent().find('div.block-content');
        if (content.is(':visible'))
            content.slideUp("slow");
        else
            content.slideDown("slow");
    });
});

我看到一些帖子说，例如在tbody上或浮动div上使用slideUp()是不行的，但正如你所见，我的“content” div不是浮动的，所以我不明白为什么它不起作用。

你有什么想法吗？

谢谢。

- AntoineB

Answer 1

#left-content .news-block .block-content {
    background: #c3c3c3;
    margin-left: 8px;
    height: 50px; 
}

使用 height 属性替代 min-height 属性。

更多信息:

http://bugs.jquery.com/ticket/6618

演示:

http://jsfiddle.net/6wyk3ztd/

- RGS

---

谢谢，这么简单的问题我居然没想到 ^^' - AntoineB

我快速阅读了这张票据，看起来它相当古老。然而，这个问题只有一年的历史。哪些版本的jquery受到这个bug的影响？ - nacho4d

拥有一个没有设置高度的div怎么样？它的高度等于内容所占用的空间... - Legends

Answer 2

以下是不更改CSS的另一种解决方案：

$('div.news-block').on('click', '.block-head', function(){
    var content = $(this).parent().find('div.block-content');
    if (content.is(':visible')){
        content.animate({minHeight: '0px'}, 1000, function(){
            $(this).css('display','none');
        });
    }else{
        $(content).css('display','block');
        content.animate({minHeight: '150px'}, 1000);
    }
});

- webNeat

---

我会采用 CSS 解决方案，因为 min-height 只是临时的解决办法，不过还是谢谢你。 - AntoineB