基于Click事件的jQuery下拉菜单功能（隐藏帮助）

Question

点击“show”时，我有两个正确显示的jQuery菜单。

例如，假设您有两个链接：

“显示1”，“显示2”

点击“显示1”，然后显示带有“显示1内容”的div

点击“显示2”，然后显示带有“显示2内容”的div

我在那一点上工作。

显然，我需要解决几个可用性问题。如果我点击“显示1”然后点击“显示2”我想要“显示1的内容”消失（隐藏“显示1内容”div）

另外一件事，如果我点击页面上的任何地方，无论哪个下拉列表处于活动状态，我都希望它隐藏在内容框外面。

我的dom结构：

ul
 li.menu
  span= link_to 'Show 1'
  ul.dropdown.hidden
   li= link_to 'show 1 content'
 li.menu
  span= link_to 'Show 2'
  ul.dropdown.hidden
   li= link_to 'show 2 content'

我的js：

  $("#search li.menu span a").click(function(event) {
    event.preventDefault();
    $(this).parent().siblings("ul.dropdown").toggleClass("hidden");
  });

所以基本上我只需要了解如何在ul.dropdown框外单击时应用隐藏，以及如何在单击OTHER ul.dropdown框时应用隐藏

感谢。

Answer 1

您需要将click事件绑定到document并检查目标（事件委派）。如果目标位于导航栏之外，则隐藏下拉列表并返回。

示例：

<ul id="nav">
    <li class="menu">
        <span><a href="#">Show 1</a></span>
        <ul class="dropdown">
            <li><a href="#">Show 1 content</a></li>
        </ul>
    </li>
    <li class="menu">
        <span><a href="#">Show 2</a></span>
        <ul class="dropdown">
            <li><a href="#">Show 2 content</a></li>
        </ul>
    </li>
</ul>
<script>

var nav = $('#nav');
nav.find('ul.dropdown').hide();

$(document).bind('click', function(e) {
    var target = $( e.target );
    if ( target.closest('#nav').length < 1 ) {
        nav.find('ul.dropdown').hide();
        return;
    }
    if ( target.parent().is('span') ) {
        var li = target.closest('li.menu');
        li.siblings().find('ul.dropdown').hide();
        li.find('ul.dropdown').toggle();
        e.preventDefault();
    }
})

</script>

Answer 2

为需要隐藏的所有元素添加一个类。在下拉框外单击或单击“显示”链接时，首先隐藏所有内容。如果是“显示”链接，则显示需要显示的内容。