隱藏下拉菜單

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