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

我有两个jQuery菜单，点击“显示”时正确显示。jQuery下拉菜单基于Click事件的功能（隐藏帮助）

例如，让我们假设你有两个链接：

“显示1”，“显示2”

您点击“显示1”，然后一个div出现与“秀1分含量”

你点击“显示2”，然后一个div显示“显示2内容”

我已经在这一点上工作。

很明显，我需要解决几个可用性问题。如果我点击“显示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箱外时如何应用隐藏应用隐藏点击其他ul.dropdown框

谢谢。

来源

2009-12-08 Daniel Fischer

-1

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

来源

2009-12-08 06:17:50 kgiannakakis

这就是我“米试图了解如何指定。‘下拉框外，当点击’ – 2009-12-08 06:27:22

我已经有一个‘在需要的所有元素隐藏’类？隐藏起来，我不知道如何告诉jQuery隐藏它，如果你点击ul外部的话，如果你可以指定更好的话。 – 2009-12-08 06:27:53

您需要将点击事件绑定到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>

来源

2009-12-08 08:17:34 David

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

回答

相关问题