Question

之前我已经问了这个问题，但所有答案都没有用，所以我有一个示例页面webpage。我有一个重新调整大小的菜单，我想在菜单外部单击时关闭菜单，并在首次切换下拉菜单时向下设置动画，以便下拉菜单不隐藏任何内容

＆＃13;

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

＆＃13;

/*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);
}

＆＃13;

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

＆＃13;

Answer 1

只需将单击事件附加到正文，然后单击一个单击事件即可拒绝第一次单击事件。

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

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

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

Answer 2

找到了代码。

＆＃13;

jQuery(document).ready(function($) {
  //open-close submenu on mobile
  $('.cd-main-nav').on('click', function(event) {
    $(this).children('ul').toggleClass('is-visible0');
  });
});


window.addEventListener('mouseup', function(event) {
  var box = document.getElementById('menu-c');
  if (event.target != box && event.target.parentNode != box) {
    $('.cd-main-nav').children('ul').removeClass('is-visible0');
  }
});

//id="menu-c" on cd-main-nav

＆＃13;

关闭菜单onbody点击和动画身体

2 个答案: