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

debugcn 发表于 Dev

罗希特·阿扎德·马利克（Rohit Azad Malik）

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

请给我建议。我的代码是

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

乔治

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

单击菜单项本身时，您需要停止事件冒泡：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。