隐藏菜单onClick [英] Hide menu onClick

问题描述

我有这个下拉菜单，只要用户点击一个链接就会滑下来。但是，我不知道如何使它滑动，每当用户点击页面上的某个地方（当然不在菜单上）。

我的CSS看起来像这样：

 < li class =da-header-button message> 
< span class =da-button-count> 32< / span> 
< a href =＃>通知< / a> 
< ul class =subnav> 
< li class =head>< span class =bold> Notificatons< / span>< / li> 
< li class =item>< a href =＃>在菜单< / a>< / li> 
< li class =item>< a href =＃>在菜单< / a>< / li> 
< / ul> 
< / li> 
  

我目前的jQuery代码如下所示：

  jQuery（ul.topnav li）。click（function（）{//当触发器被点击... 
 //以下事件应用于子进程本身（move subnav up and down）
 jQuery（this）.find（ul.subnav）。slideDown（'fast'）。show（）; //下拉subnav点击
 jQuery（这个）.hover（function（）{
}，function（）{
 jQuery（this）.find（ul.subnav）。slideUp（'slow'）; //当鼠标悬停退出subnav，将其移回
}）; 
}）; 
  

如果我从这里编辑最后一个jQuery函数： jQuery（this）。 hover（function（） to this： jQuery（this）.click（function（）它不工作，因为它只会slideDown然后

感谢您的帮助。

编辑：

谢谢你们，但是如果我同时打开这两个子菜单怎么办？我如何防止这个？

我只想允许1打开。

解决方案

当点击传播到文档时，向上滑动所有可见的菜单：

  $（document）.on（click，function（）{
 $（。subnav：visible）。slideUp（） ; 
}）; 
  

然后通过停止在菜单中防止这种情况发生事件传播。

  $（ul.topnav）。on（click，li，function ）{
 e.stopPropagation（）; 
 $（。subnav：visible，$（this）.siblings （））效果基本show（ 快）。 
 $（。subnav，this）.slideDown（）; 
}）; 
  

小提琴： http://jsfiddle.net/jonathansampson/qQsdN/

I have this dropdown menu, that will slideDown whenever my users click on a link. However, I don't know how to make it slideUp, whenever the user click somewhere on the page (Not on the menu of course).

My CSS looks like this:

<li class="da-header-button message">
    <span class="da-button-count">32</span>
    <a href="#">Notifications</a>
    <ul class="subnav">
        <li class="head"><span class="bold">Notificatons</span></li>
        <li class="item"><a href="#">Under menu</a></li>
        <li class="item"><a href="#">Under menu</a></li>
    </ul>
</li>

My current jQuery code looks like this:

jQuery("ul.topnav li").click(function() { //When trigger is clicked...  
    //Following events are applied to the subnav itself (moving subnav up and down)  
    jQuery(this).find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click  
    jQuery(this).hover(function() {  
    }, function(){  
        jQuery(this).find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  
    });  
});

If I edit the last jQuery function from this: jQuery(this).hover(function() to this: jQuery(this).click(function() it does not work, since it will just slideDown and then up right after.

Thank you for your help.

EDIT:

Thanks guys! But what if I have two of these submenus open at the same time? How can I prevent this?

I only want to allow to have 1 open.

解决方案

Slide up all visible menus when a click propagates to the document:

$(document).on("click", function(){
    $(".subnav:visible").slideUp();
});

Then prevent this from happening when you're within menus by stopping the event propagation.

$("ul.topnav").on("click", "li", function(e){
    e.stopPropagation();
    $(".subnav:visible", $(this).siblings()).slideUp("fast");
    $(".subnav", this).slideDown();
});

Fiddle: http://jsfiddle.net/jonathansampson/qQsdN/

这篇关于隐藏菜单onClick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！