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

how to hide dropdown menu if i click body any element?

本文关键字：元素 任何 如果 何隐藏 隐藏 下拉菜单      更新时间：2023-09-26

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

请给我建议。我的代码是

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

这将检查您是否单击了元素，只需设置选择器（"大多数"父项）和"隐藏"功能：

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