javascript - 如果我单击正文任何元素，如何隐藏下拉菜单？

Question

如果我单击外部下拉菜单的正文元素，如何关闭我的下拉菜单。

请给我建议。 我的代码是

$(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