Question

当用户点击“手风琴菜单”按钮时，它通常有效。但是，动画中大约有十分之一没有坚持并且返回到展开或折叠状态，具体取决于它的起始状态。我从其他地方复制了脚本，但它们看起来很简单。

HTML：

<ul id="system-nav">
    <li><div>Umbrella</div>
        <ul>
            <li><a href="../../Admin">Admin</a></li>
            <li><a href="../../Deshboard">Dashboard</a></li>
            <li><a href="../../Daylight">Daylight</a></li>
        </ul>
    </li>
</ul>

就像我说过的那样，我尝试了同样的几个不同版本。这些只是从随机的地方拍摄的，我只是略微编辑它们。所有这些都做同样的事情。

$("#system-nav > li > div").click(function(){
if(false == $(this).next().is(':visible')) {
    $('#system-nav ul').slideUp(300);
}

$(this).next().slideToggle(300).delay(250);
});

$('#system-nav ul:eq(0)').hide();

$(document).ready(function() {  
$('#system-nav li div').click(function() {
    $('#system-nav ul').slideUp('slow');    
    $(this).next().slideDown('slow');
});

$("#system-nav ul").hide();

 });

$(document).ready(function(){
$('#system-nav li div').click(function() {
    $(this).next().slideDown('slow');
    return false;
}).next().hide();
});

Answer 1

使用:visible的第一个JS样本不是正确的。请改用:hidden

在第二个你正在剪辑它？

在最后一个你取消它？

这是一个有效的代码：http://jsfiddle.net/Q9qNw/

$("#system-nav").on("click","div",function(){
    if ($(this).next().is(":hidden")) {
        $(this).next().slideDown("500");
    } else {
        $(this).next().slideUp("500");
    }
});

为什么我的jQuery手风琴菜单没有？

1 个答案: