slideUp()、slideDown、show() 和 hide() 没有动画

Question

我已经使用以下代码在 ul-li 中制作手风琴：

$(document).ready(function(){
    var rr = true;
        $('ul.side > li.first-level > ul').hide();

        $('ul.side > li.first-level').click(function(){

            if(rr===true){
            $(this).children('ul').slideDown(150);
            rr = false;
            }

            else{
            $(this).children('ul').slideUp(150);
            rr = true;

            }

        });

    });

问题在于 show-hide 或 slideUp-slideDown 正在显示或隐藏内容，但没有按应有的动画效果。 Intead，我发现增加值或上下滑动显示隐藏的次数越多，显示或隐藏元素的延迟就越多。我在这个网站的某个地方发现了一个问题，他遇到了同样的问题，但答案告诉他不要使用 tbody。我很有趣 ul-li。我什至尝试将要显示或隐藏在 div 下的 ul- 括起来，但它是一样的。这是小提琴：http://jsfiddle.net/xCHCF/。提前致谢。

Answer 1

这是一个CSS问题，你不能浮动<a>，你必须设置它块：

ul.side a {
    border-bottom: 1px solid #494949;
    color: #000000;
    /* float : left; */
    display: block; <--
    padding: 15px 3%;
    text-align: right;
    text-decoration: none;
    width: 94%;
}

对于 jquery 部分，您可以这样做：

$('ul.side > li.first-level > ul').hide();
$('ul.side > li.first-level').click(function(){
    $(this).children('ul').slideToggle(250);
});

这里是 jsFiddle： http://jsfiddle.net/SfKR4/

---

解释为什么会发生这种情况，由于评论。

动画正在发生，你只是看不到它，直到它完成！

简单的原因：“溢出：隐藏”的魔力 阅读此内容：http://colinaarts.com/articles/the-magic-of-overflow-hidden/ 了解有关此效果的更多详细信息！

当<ul>开始动画时，jquery在其上设置一个overflow:hidden;，并开始将height从0动画到他实际的height，当达到高度时，overflow:hidden;被移除而<ul> 则位于<a> 之下。

在你的小提琴中设置<a> 的宽度为 50%，你会很清楚发生了什么！在这里：http://jsfiddle.net/BEtU2/

删除float 并设置为display:block; 会删除overflow:hidden; 和<ul> 的魔力，它在<a> 下从头开始。

希望对你有帮助。