如何检测推送菜单之外的点击和关闭菜单

Question

我正在使用 javascript 打开一个推送菜单。但是，我想添加一个功能，如果鼠标在推送菜单之外点击，它将关闭菜单。我以前从未编码过，所以真的不确定从哪里开始。

$(document).ready(function() {

  $menuLeft = $('.pushmenu-left');

  $nav_list = $('#nav_list');

  $nav_list.click(function() {

    $(this).toggleClass('active');

    $('.pushmenu-push').toggleClass('pushmenu-push-toright');

    $menuLeft.toggleClass('pushmenu-open');

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav class="pushmenu pushmenu-left">

  <div class="pushmenu_inner">

    <ul class="links">

      <li><a href="index">Home</a></li>

      <li><a href="#">About Us</a></li>

      <li><a href="#">Missions</a></li>

      <li><a href="#">Partners</a></li>

      <li><a href="#">Events</a></li>

      <li><a href="#">Contact</a></li>

      <li><a href="#">Give</a></li>

    </ul>

  </div>

</nav>

Answer 1

尝试这个。我添加了一个初始样式来隐藏菜单。然后，您可以使用菜单按钮或单击文档来显示菜单。$(document).ready(function() {&nbsp; &nbsp; $('#menu').click(function() {&nbsp; &nbsp; &nbsp; &nbsp; if($('nav').is(':visible')) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hideMenu();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('nav').show(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(this).animate({left:'0'});&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$('#menu').html('hide menu');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; $(document).click(function(e) {&nbsp; &nbsp; &nbsp; &nbsp; if(!$(e.target).closest('#menu').length && $('nav').is(':visible')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hideMenu();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});function hideMenu() {&nbsp; &nbsp; $('nav').animate({left:'-100px'}, function() {&nbsp; &nbsp; &nbsp; &nbsp; $(this).hide();&nbsp; &nbsp; &nbsp; &nbsp; $('#menu').html('show menu');&nbsp; &nbsp; });&nbsp;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button type="button" id="menu">show menu</button><nav class="pushmenu pushmenu-left" style="display:none; left:-100px; position: relative">&nbsp; <div class="pushmenu_inner">&nbsp; &nbsp; <ul class="links">&nbsp; &nbsp; &nbsp; <li><a href="index">Home</a></li>&nbsp; &nbsp; &nbsp; <li><a href="#">About Us</a></li>&nbsp; &nbsp; &nbsp; <li><a href="#">Missions</a></li>&nbsp; &nbsp; &nbsp; <li><a href="#">Partners</a></li>&nbsp; &nbsp; &nbsp; <li><a href="#">Events</a></li>&nbsp; &nbsp; &nbsp; <li><a href="#">Contact</a></li>&nbsp; &nbsp; &nbsp; <li><a href="#">Give</a></li>&nbsp; &nbsp; </ul>&nbsp; </div></nav>

Answer 2

添加事件以触发点击操作并关注它是否包含您的菜单。我举个例子，希望对你解决问题有帮助。&nbsp;html<nav class="pushmenu pushmenu-left" id='menuBar'>&nbsp; <div class="pushmenu_inner">&nbsp; &nbsp;<ul class="links">&nbsp; &nbsp; &nbsp;<li><a href="index">Home</a></li>&nbsp; &nbsp; &nbsp;<li><a href="#">About Us</a></li>&nbsp; &nbsp; &nbsp;<li><a href="#">Missions</a></li>&nbsp; &nbsp; &nbsp;<li><a href="#">Partners</a></li>&nbsp; &nbsp; &nbsp;<li><a href="#">Events</a></li>&nbsp; &nbsp; &nbsp;<li><a href="#">Contact</a></li>&nbsp; &nbsp; &nbsp;<li><a href="#">Give</a></li>&nbsp; &nbsp; </ul>&nbsp; </div></nav>Javascriptwindow.addEventListener('click', function(e){&nbsp; &nbsp;&nbsp; &nbsp;if (document.getElementById('menuBar').contains(e.target)){&nbsp; &nbsp; &nbsp; &nbsp;console.log('clicked inside');&nbsp; &nbsp; &nbsp; &nbsp;// toggle your menu according to your requirements&nbsp; &nbsp;} else{&nbsp; &nbsp; &nbsp; &nbsp;// toggle your menu according to your requirements&nbsp; &nbsp; &nbsp; &nbsp;console.log('clicked outside');&nbsp; &nbsp;}});

Answer 3

使用这个 Jquery$(document).click(function () {&nbsp; &nbsp; &nbsp; &nbsp; //Write your code here&nbsp;&nbsp; &nbsp; });这意味着当您在该部分之外单击时，您各自的代码将运行