隐藏下拉菜单答案

【问题标题】：Hide drop down menu隐藏下拉菜单
【发布时间】：2015-07-27 10:13:08
【问题描述】：

我创建了下拉菜单，这样当用户单击列表菜单时会出现一个下拉菜单。我想要做的是当用户点击其他任何地方时隐藏下拉菜单。感谢您的光临。

这是我的代码：

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;
 }

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();
});

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

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

Here is the JSFiddle demo

【讨论】：

【解决方案2】：

您可以将点击事件附加到文档正文，如下所示：

$('html').click(function() {
    $( hideall ).hide();
});

当点击其中一个菜单项时，防止点击传播到它：

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

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

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

});

【讨论】：

【解决方案3】：

 $('.drop-down div').hide();

将隐藏所有下拉 div 然后你展示你想要的那个

像这样：

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

$('#woman-li').on("click",function () {
 $('.drop-down div').hide();
    $('#woman').show();
});

$( "#man-li" ).click(function() {
 $('.drop-down div').hide();
    $('#man').show(); 
});

$( "#health-li" ).click(function() {
 $('.drop-down div').hide();
    $('#health').show();
});

【讨论】：