Question

在我的导航中，用户单击链接以打开子菜单。因为它的子菜单保持打开状态，直到它的父链接再次被点击。如果用户点击页面上的任何位置但在子菜单隐藏的子菜单内，我希望如此。

我试图开始工作的代码是：

for(var i=0; i<$('#topNav ul li').length; i++){
    if(openMenu[i] == 1){ 
        //i use an array to keep track of which submenu is open
        //all 'closed' or hidden submenus are assigned a value of 0 in the array,
        //the open submenu gets a value of 1
        $('body').not('#submenu'+i).click(function(){
            $('#submenu'+i).hide();
        });
    }   
}

问题是当我点击身体时没有任何反应。我在jsfiddle上设置了一个基本的例子，它是here。

有什么我想念的吗？你不能使用body标签作为点击事件的选择器吗？

Answer 1

你可能想尝试这样的事情：

JS：

$(function(){
    var visible = false;
    $('button').click(function(e){
        $('.menu').hide();
        var $ref = $(this).attr('ref');
        $('#menu'+$ref).show();
    });
});

HTML：

<div class='menu' id='menu1' style='background-color:#f00;'></div>
<div class='menu' id='menu2' style='background-color:#ff0;'></div>
<div class='menu' id='menu3' style='background-color:#f0f;'></div>
<button ref='1'>Click Me 1</button>
<button ref='2'>Click Me 2</button>
<button ref='3'>Click Me 3</button>

小提琴：http://jsfiddle.net/maniator/46wuy/4/

减少在每次点击时都需要for循环

修改
要在下面发表您的评论：

$('*').click(function(e){ e.stopPropagation(); if($(e.currentTarget).not($('.menu, button')).length > 0){ $('.menu').hide(); } });

小提琴：http://jsfiddle.net/maniator/46wuy/7/

Answer 2

我认为你没有走正确的道路。当用户点击正文时，必须关闭所有菜单，因此，您无需指定打开菜单的内容，只需通过调用$('#topNav ul li').hide()关闭所有菜单（不确定如何你的标记）。

为了避免点击打开的菜单，点击到正文，你应该绑定点击它取消点击：

$(clicked_menu).click(function(event) {
    event.stopPropagation();
});

隐藏身体上的子菜单

2 个答案: