jQuery隐藏下拉菜单取决于点击

Question

我有一系列的下拉按钮，每个按钮都有自己独立的内容持有者。我希望每个单击时都切换显示，但在单击页面上其他任何位置（包括其他按钮之一）时，隐藏显示除了内容持有者之外。

下面是代码：

$(document).on({ 
    click: function (event) { 
    $("#content1").toggle(); 
    $(document).on({ 
     click: function HideMenu1(event) { 
     if ($(event.target).attr("id") != "content1") { 
      $("#content1").hide(); 
      $(document).off("click", HideMenu1); 
     } 
     } 
    }); 
    } 
}, "#menu1"); 

$(document).on({ 
    click: function (event) { 
    $("#content2").toggle(); 
    $(document).on({ 
     click: function HideMenu2() { 
     if ($(event.target).attr("id") != "content2") { 
      $("#content2").hide(); 
      $(document).off("click", HideMenu2); 
     } 
     } 
    }); 
    } 
}, "#menu2"); 

$(document).on({ 
    click: function (event) { 
    $("#content3").toggle(); 
    $(document).on({ 
     click: function HideMenu3() { 
     if ($(event.target).attr("id") != "content3") { 
      $("#content3").hide(); 
      $(document).off("click", HideMenu3); 
     } 
     } 
    }); 
    } 
}, "#menu3"); 


<div id=menu1>Menu #1</div> 
<div id=content1 style='display:none'>Contents of menu #1</div> 

<div id=menu2>Menu #2</div> 
<div id=content2 style='display:none'>Contents of menu #2</div> 

<div id=menu3>Menu #3</div> 
<div id=content3 style='display:none'>Contents of menu #3</div> 

据工作......如果你点击的元素之一，再次点击将其关闭，然后尝试单击它第三次时除外。然后它不会打开，直到您先点击其他地方。

示例 - >http://jsfiddle.net/LsNZx/

我知道我靠近...帮助！

Answer 1

试试这样说：

$('.menu').click(function() { 
    $('.menu').not(this).nextUntil('.menu').hide(); 
    $(this).nextUntil('.menu').toggle(); 
    return false; 
}); 

$(document).click(function() { 
    $('.menu').nextUntil('.menu').hide(); 
}); 


<div id=menu1 class='menu'>Menu #1</div> 
<div id=content1 style='display:none'>Contents of menu #1</div> 

<div id=menu2 class='menu'>Menu #2</div> 
<div id=content2 style='display:none'>Contents of menu #2</div> 

<div id=menu3 class='menu'>Menu #3</div> 
<div id=content3 style='display:none'>Contents of menu #3</div> 

Fiddle

我把菜单项类，允许他们可以很容易地选择。接下来，获取菜单的所有兄弟，直到下一个菜单，并显示它们。所有其他人应该隐藏起来。通常点击文档将关闭所有菜单。