1

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

这是一个模拟http://jsfiddle.net/ctL6T/1/

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

我想通过在点击事件上使用 $.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，它不应该影响我所要求的功能

4

2 回答 2

3

试试这个：

$(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/

于 2013-04-05T18:52:18.937 回答
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/

于 2013-04-05T19:00:17.553 回答