Question

我创建了一个下拉菜单，单击导航按钮时会打开该菜单。但是，当鼠标点击页面正文时，我无法找到关闭下拉菜单的方法。

我能搞清楚，请帮帮我

(function(){
    var bodyEl = $('body'),
    navToggleBtn= bodyEl.find('.nav-toggle-btn');
    navToggleBtn.on('click', function(e){
        bodyEl.toggleClass('active-nav');
        e.preventDefault();
    });
})();

在css中创建active-nav并与菜单和正文链接

Answer 1

我不知道它是否是正确的解决方案，但我会添加一个覆盖整个页面的div元素。

菜单位于该div的顶部，但其余部分位于下方。如果单击div，它将关闭自身和菜单。

所以基本上，它是一个灯箱（如显示图像），但没有阴影。或者 width 一个阴影，因为它会使你的菜单更加突出，并且它符合禁用体内特定元素点击的期望。

拥有额外元素的另一个优点，而不仅仅是捕获身体主要水平上的点击，它不会干扰身体本身的其他事件处理程序，这可能会捕获点击，因此会产生意外只想关闭菜单的人的结果。

一个粗略的例子可以在下面找到：

＆＃13;

$('header > ul > li').on('click', function() {
  // Deactive all menu items
  $('ul.active').removeClass('active');
  // Activate the one clicked.
  $(this).closest('li').addClass('active');
  
  // If there is no lightbox setup a new one.
  var box = $('.lightbox');
  if (box.length == 0) {
    // It's just a div with a class.
    $('<div>')
      .prependTo($('body'))
      .addClass('lightbox')
      .on('click', function() {
          // Lightbox clicked? Remove it, and deactivate the menu.
          $('.lightbox').remove();
          $('li.active').removeClass('active');
        });
  }
  
  
});

＆＃13;

li {
  padding: 1em;
}
header > ul > li {
  display: inline-block;
  vertical-align: top;
  position: relative;
  background-color: #eee;
}
li > ul {
  display: none;
  background-color: #ddd;
  position: absolute;
  top: 100%;
  left: 0;
}

li.active > ul {
  display: block;
}

.lightbox {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0, 0.2); /* Just for show */
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
   Header, page title
  <ul>
    <li>Main
      <ul>
        <li>sub</li>
        <li>sub</li>
        <li>sub</li>
        <li>sub</li>
      </ul>
    </li>
    <li>Other</li>
    <li>About</li>
  </ul>
    
</header>
<section>
  Main content
</section>

＆＃13;

Answer 2

您可以将click事件绑定到body，然后使用event.target

检查事件是否是从特定元素生成的

var bodyEl = $('body');
navToggleBtn = bodyEl.find('.nav-toggle-btn');
$('body').on('click', function (e) {
    if ($(e.target).hasClass("nav-toggle-btn")) {
        bodyEl.toggleClass('active-nav');
        e.preventDefault();
        e.stopPropagation();
    }
    else
    {
        //close the menu here
    }
});

菜单关闭点击正文页面

2 个答案: