如何隐藏下拉菜单，如果我点击身体任何元素？

Question

如何关闭我的DropDown菜单，如果我点击外部下拉菜单的身体元素。

请给我建议。 我的代码是

$(document).ready(function(){ 
 

 
    $(document).on('click', '.top-nav-head>li>a', function(){ 
 
     $(this).siblings('ul').toggle().closest('.top-nav-head>li').siblings('li').find('ul').hide(); 
 
    }); 
 

 
});

.top-nav-head{ 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    background:blue; 
 
    float: left;} 
 
.top-nav-head>li{ 
 
    
 
    float: left; 
 
    position: relative; 
 
} 
 
.top-nav-head>li > a{ 
 
    color: #000; 
 
     padding: 0 10px; 
 
     display: block; 
 
     line-height: 40px; 
 
     font-size: 14px; 
 
} 
 
.top-nav-head>li > ul{ 
 
    position: absolute; 
 
     display: none; 
 
     top: 100%; 
 
     left: 0; 
 
     min-width: 140px; 
 
     right: 0; 
 
     list-style-type: none; 
 
     padding: 5px 0 5px 0; 
 
     margin: 0; 
 
     background-color: red; 
 
    
 
} 
 
.top-nav-head>li > ul>li{ 
 
    display: block; 
 
} 
 
.top-nav-head>li > ul>li > a{ 
 
    display: block; 
 
      color:@white; 
 
      padding: 5px 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<ul class="top-nav-head"> 
 
      <li><a href="#">Home</a></li> 
 
      <li class="active"> 
 
       <a href="#">Admin Module</a> 
 
       <ul> 
 
       <li><a ui-sref="av-kw-questions.empty">Questions</a></li> 
 
       <li><a ui-sref="av-wbs">WBS Elements</a></li> 
 
       <li><a ui-sref="av-lbp">Lookback planning</a></li> 
 
       <li><a href="#">Form</a></li> 
 
       <li><a href="#">Plan Component</a></li> 
 
       </ul> 
 
      </li> 
 
      <li> 
 
      <a href="#">Project Management</a> 
 
      <ul> 
 
       <li><a href="#">Link 1</a></li> 
 
       <li><a href="#">Link 2</a></li> 
 
       <li><a href="#">Link 3</a></li> 
 
       <li><a href="#">Link 4</a></li> 
 
       <li><a href="#">Link 5</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul>

Answer 1

您可以将一个事件处理程序附加到将隐藏下拉菜单的文档。

你会需要停止该事件上的菜单项本身时，点击冒泡：

$(document).ready(function() { 
    $(document).on('click', function() { 
     $('.top-nav-head > li > ul').hide(); 
    }); 
    $(document).on('click', '.top-nav-head>li>a', function (e) { 
     e.stopPropagation(); 
     $(this).siblings('ul').toggle().closest('.top-nav-head>li').siblings('li').find('ul').hide(); 
    }); 

}); 

JSFiddle

Answer 2

这将检查如果你点击的元素上，只需将您的选择（ “最” 父）和 “隐藏” 功能：

$(document).mouseup(function (e) 
{ 
    var your_element = $('#your_element'); 
    if(container.has(e.target).length === 0) 
    { 
     //hide your element 
    } 
});