Question

我正在使用jQuery UI菜单小部件在我的页面上有标题导航

我的问题是我想关闭任何其他显示的子菜单，如果点击了另一个主菜单，你可以看到我的小提琴，如果你点击一个主存根，如果你点击另一个主存根，子菜单保持打开

我想通过在click事件上使用$ .each，我可以使用相同的代码切换遍历元素并来回翻转它们，但这会打开相反的菜单

        $('.has-sub').on('click', function(){
            $('#mainmenu li').each(function () {
                $(".submenu" ).toggle();
            });
            $(this).toggleClass('ui-state-active').children('span').toggleClass('ui-icon-triangle-1-s ui-icon-triangle-1-n');
            return false;
         });

这只是一团糟

 $('.has-sub').on('click', function(){
$('#mainmenu li').each(function () {
  $(".submenu" ).toggle();
  $(this).toggleClass('ui-state-active').children('span').toggleClass('ui-icon-triangle-1-s ui-icon-triangle-1-n');
});
return false;
 });

一如既往地感谢任何帮助

*由于无格式内容的闪烁，我决定使用一些jquery ui主题类将主菜单作为静态html，它不应该影响我要求的功能

Answer 1

试试这个：

$(function() {

            $( ".submenu" ).menu({
                position: {at: "left bottom"},
                icons: { submenu: "ui-icon-triangle-1-s" }
            });
            $('.has-sub').on('click', function(){
                $(this).next(".submenu").toggle();
                $(this).toggleClass('ui-state-active').children('span').toggleClass('ui-icon-triangle-1-s ui-icon-triangle-1-n');
                $('.has-sub').not($(this)).each(function(){
                   $(this).next(".submenu").hide();
                    $(this).removeClass('ui-state-active');
                });
                return false;
                });     
});

jsFiddle ：http://jsfiddle.net/ctL6T/6/

Answer 2

我的解决方案是在您点击导航中的任何<a>元素时触发事件。当您点击<a>中的#mainmenu个元素之一时，所有隐含submenu类的元素都将被隐藏。此外，任何类ui-state-active的元素都会删除ui-state-active类。

这是我添加的所有内容！

$('#mainmenu a').on('click', function(){
    $('.submenu').hide();
    $('.ui-state-active').removeClass('ui-state-active');
});

这是一个小提琴！ http://jsfiddle.net/ctL6T/5/

修订版

我添加了一些额外的逻辑，以确保当您单击链接时它将关闭下拉菜单。如果单击下拉列表中的链接，它将关闭下拉导航并删除活动状态。此外，如果您单击主链接，它将关闭下拉导航并删除活动状态。

这应该有助于你！

小提琴：http://jsfiddle.net/ctL6T/8/

Onclick显示子菜单但隐藏其他子菜单

2 个答案: