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>

它正在工作......除非您单击其中一个元素，再次单击以关闭它，然后尝试第三次单击它。然后它会打开，直到你先点击其他地方。

示例 - ＆gt; 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

我在菜单项上放置了类，以便轻松选择它们。接下来获取菜单的所有兄弟姐妹，直到下一个菜单，然后显示它们。所有其他人都应该被隐藏。一般单击文档将关闭所有菜单。

jquery隐藏下拉列表取决于点击

1 个答案: