隐藏下拉菜单

我已经创建了下拉菜单,以便当用户单击列表菜单时将出现一个下拉菜单。我想要做的是在用户单击其他任何位置时隐藏下拉菜单。感谢您的宝贵时间。

这是我的代码:

的HTML

<div class="container">
 <div id='cssmenu'>
  <ul>

    <li id="woman-li"><a href="#"> <span>Woman</span> </a> </li>
    <li id="man-li"><a href="#"> <span>Man</span> </a> </li>
    <li id="health-li"><a href="#"> <span>Health</span> </a> </li>
  </ul>
 </div>

 <div class="drop-down">
   <div id='woman'> 
     <h1>Woman</h1>
   </div>

  <div id='man'> 
   <h1>Man</h1>
 </div> 

 <div id='health'> 
   <h1>Health</h1>
 </div> 
</div> 
</div>

的CSS

.container{
 margin-left: 10%;
 margin-right: 10%;
 }

.drop-down{
 border-top: none!important;
 border: 1px solid rgba(151, 151, 151, 0.98);
 margin-bottom: 2.618em; 
 }
 .drop-down #woman, .drop-down #man, .drop-down #health, .drop-down    #device,.drop-down #living{
 display: none;
 }

JS

var hideall = $('#woman,#man,#health');

$('#woman-li').click(function () {
 $( hideall ).hide(),$('#woman').show();
});

$( "#man-li" ).click(function() {
 $( hideall ).hide(),$('#man').show(); 
});

$( "#health-li" ).click(function() {
 $( hideall ).hide(),$('#health').show();
});

阿斯·N

将此添加到您的JS代码中:

$("ul>li").focusout(function(){
    $(".drop-down > *").hide();
});

这是JSFiddle演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

隐藏样式下拉菜单

来自分类Dev

点击下拉菜单内容,下拉菜单隐藏

来自分类Dev

按下拉菜单隐藏表格

来自分类Dev

如何隐藏微调下拉菜单

来自分类Dev

kendogrid内部隐藏的下拉菜单

来自分类Dev

下拉菜单隐藏在滑块后面

来自分类Dev

下拉菜单隐藏在div后面

来自分类Dev

下拉菜单隐藏在页脚下

来自分类Dev

隐藏溢出的导航,但仍显示下拉菜单

来自分类Dev

隐藏和显示下拉菜单

来自分类Dev

下拉菜单不隐藏子类别

来自分类Dev

如何隐藏下拉菜单选项?

来自分类Dev

在下拉菜单中隐藏选项

来自分类Dev

下拉菜单隐藏图片onchange javascript

来自分类Dev

使用JavaScript隐藏CSS下拉菜单

来自分类Dev

Backbone JS 模型:隐藏下拉菜单

来自分类Dev

鼠标离开时隐藏下拉菜单

来自分类Dev

在悬停问题上隐藏下拉菜单

来自分类Dev

从下拉菜单中显示/隐藏,隐藏 div 中的新下拉菜单消失

来自分类Dev

单击时隐藏下拉菜单项隐藏吗?

来自分类Dev

bootstrap-select下拉菜单被另一个下拉菜单隐藏

来自分类Dev

在点击下拉菜单中隐藏其他下拉菜单

来自分类Dev

当用户单击下拉菜单的一侧时,如何隐藏下拉菜单?

来自分类Dev

在下拉菜单外的任何地方单击时如何隐藏下拉菜单?

来自分类Dev

检测下拉菜单

来自分类Dev

角度的下拉菜单

来自分类Dev

动态下拉菜单

来自分类Dev

JavaScript下拉菜单

来自分类Dev

左侧的下拉菜单