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>

小提琴

我将类放在菜单项上，以便于选择它们。接下来获取菜单的所有同级，直到下一个菜单，并显示它们。所有其他内容都应隐藏。通常单击文档将关闭所有菜单。