Question

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

请给我一些建议。我的代码是

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

这将检查您是否单击了元素，只需设置您的选择器（＆＃34;大多数＆＃34;父级）和＆＃34;隐藏＆＃34;功能性：

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

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

2 个答案: