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，我发现你增加值或者下滑show-hide越多，它在显示或隐藏元素时的延迟就越多。我在这个网站的某个地方找到了一个问题，他遇到了同样的问题，但答案告诉他不要使用tbody。我很开心。我甚至尝试将ul显示或隐藏在div下，但它是相同的。这是小提琴：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>和{{1}}的魔力。

希望它有所帮助。

slideUp（），slideDown，show（）和hide（）不是动画

1 个答案: