隐藏下拉菜单

Question

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

这是我的代码：

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

Answer 1

您可以将click事件附加到文档主体，如下所示：

$('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();

}）;

Answer 2

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

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

这是JSFiddle演示

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