Question

我有以下菜单 - 它运作正常。我有它的工作，当点击列表项时，它下降。单击另一个列表项时，旧的列表项将关闭，单击的列表项将打开。但是 - 单击已打开的列表项（关闭它）时。它关闭然后再次重新打开。我怎样才能让它关闭而不是再次重新打开。请参阅下面的jsfiddle和代码。感谢

http://jsfiddle.net/Bx5cu/15/

<nav id="global_nav">
   <ul class="no-js">
     <li><a href="#">ABOUT US</a>
     <ul>
        <li><a href="#">About Us</a></li>
     </ul>
     </li>
     <li><a href="#">PRODUCTS</a>
     <ul>
        <li><a href="#">Products</a></li>
        <li><a href="#">Tractor</a></li>
        <li><a href="#">Organic</a></li>
    </ul>
    </li>
  </ul>
</nav>

JS

$(document).ready(function(){
$('#global_nav > ul').toggleClass('no-js js');

var menuList = $("#global_nav").find(".js").find("li");
menuList.find("ul").hide();
menuList.on("click", function(){

menuList.removeClass("selected");
menuList.find("ul").slideUp(400);
$(this).find("ul").slideDown(400);
$(this).addClass("selected");


});

});

修改的感谢所有输入

使用了以下内容 - 我使用的是一个人提交的条件，他首先回答了问题，但现在找不到他们的答案 - 我只是稍微调整了一下但是继续jsfiddle：link - 所有现在效果很好 - 谢谢:)。

新JS

$(document).ready(function(){
$('#global_nav > ul').toggleClass('no-js js');

var menuList = $(".js").find("li");
menuList.find("ul").hide();
menuList.on("click", function(){
    menuList.find("ul").slideUp(400);
    if (!($(this).find("ul").is(":visible"))) {
        menuList.removeClass("selected");
        $(this).find("ul").slideDown(400);
        $(this).addClass("selected");       
    };  
});

});

Answer 1

您可以像这样切换它们，而不是明确地显示和隐藏您的ul：

$(this).find("ul").slideToggle(400);
$(this).toggleClass("selected");

修改

如果您希望一次只打开一个菜单，请在切换之前添加以下行：

menuList.find("ul").slideUp(400);

请参阅http://jsfiddle.net/D3edP/1/

Answer 2

        <script type="text/javascript">
        $(function () {

            var menu_ul = $('.no-js" > li > ul'),
                   menu_a = $('.no-js" > li > a');

            menu_ul.hide();

            menu_a.click(function (e) {
                e.preventDefault();
                if (!$(this).hasClass('active')) {
                    menu_a.removeClass('active');
                    menu_ul.filter(':visible').slideUp('normal');
                    $(this).addClass('active').next().stop(true, true).slideDown('normal');
                } else {
                    $(this).removeClass('active');
                    $(this).next().stop(true, true).slideUp('normal');
                }
            });

        });

使用上面的代码

Answer 3

更新答案

点击此处，DEMO http://jsfiddle.net/yeyene/Bx5cu/29/

$(document).ready(function () {
    $('li ul').slideUp();

    $('.no-js li a').on("click", function () {
        $('ul ul').slideUp(400);
        if($(this).siblings('ul').is(":visible"))
            $(this).siblings('ul').slideUp(400);
        else
            $(this).siblings('ul').slideDown(400);
    });
});

Answer 4

这是经过一些调整和有效输入后工作的JS：

$(document).ready(function(){
$('#global_nav > ul').toggleClass('no-js js');

var menuList = $(".js").find("li");
menuList.find("ul").hide();
menuList.on("click", function(){
menuList.find("ul").slideUp(400);
if (!($(this).find("ul").is(":visible"))) {
    menuList.removeClass("selected");
    $(this).find("ul").slideDown(400);
    $(this).addClass("selected");       
};  
});

});

http://jsfiddle.net/Bx5cu/25/

Answer 5

可以直接更改您的点击监听器：我已更新您的小提琴here

$(document).ready(function(){
    $('#global_nav > ul').toggleClass('no-js js');

    var menuList = $(".js").find("li");
    menuList.find("ul").hide();
    menuList.on("click", function(){

        menuList.find("ul").slideUp(400);
        if(!$(this).is(".selected")){
                console.log("ok");
                $(this).find("ul").slideDown(400);
                menuList.removeClass("selected");// <-- simply add this to fix the issue
                $(this).addClass("selected");
        }else{
                menuList.removeClass("selected");
        }       
    });

});

jquery slideup slidedown - 停止在当前列表项上重新打开

5 个答案:

更新答案