javascript - 隐藏 body 点击上的子菜单

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>

fiddle :http://jsfiddle.net/maniator/46wuy/4/

这减少每次点击时都需要一个 for 循环

编辑
为了解决您的评论:

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

fiddle :http://jsfiddle.net/maniator/46wuy/7/