javascript - 关闭 body 点击菜单和动画 body

Question

我以前问过这个问题，但所有答案都不起作用，所以我有一个示例页面，webpage .我有一个重新调整大小的菜单，我想在菜单外单击时关闭菜单，以及在第一次切换下拉菜单时让主体向下动画，这样下拉菜单就不会隐藏任何内容。

jQuery(document).ready(function($) {
  //open-close submenu on mobile
  $('.cd-main-nav').on('click', function(event) {
    $(this).children('ul').toggleClass('is-visible0');
  });
});

/*when the drop down is toggled*/

.cd-main-nav ul.is-visible0 {
  -webkit-transform: translateY(70px);
  -moz-transform: translateY(70px);
  -ms-transform: translateY(70px);
  -o-transform: translateY(70px);
  transform: translateY(70px);
}

<nav class="cd-main-nav">
  <ul>
    <li><a href="../index.html">Home</a></li>
    <li class="current2"><a href="mon.html">Mon</a></li>
    <li><a href="tue.html">Tue</a></li>
    <li><a href="wed.html">Wed</a></li>
  </ul>
</nav>

Answer 1

只需将点击事件附加到正文并将单独的点击事件附加到拒绝第一个点击事件的窗口。

$('html').click(function() {
//Hide the menu
});

$('.slideout-menu').click(function(event){
    event.stopPropagation();
});

警告，如果使用此技术，请注意 the dangers of stopping propagation .