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

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() {

    $('#menu').click(function() {

        if($('nav').is(':visible')) { 

            hideMenu();

        }

        else {

            $('nav').show(function() {

                 $(this).animate({left:'0'});

                 $('#menu').html('hide menu');

            });

        }

    });

    $(document).click(function(e) {

        if(!$(e.target).closest('#menu').length && $('nav').is(':visible')) {

            hideMenu();

        }

    });

});

function hideMenu() {

    $('nav').animate({left:'-100px'}, function() {

        $(this).hide();

        $('#menu').html('show menu');

    }); 

}

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

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

添加事件以触发点击操作并关注它是否包含您的菜单。我举个例子，希望对你解决问题有帮助。 

html

<nav class="pushmenu pushmenu-left" id='menuBar'>

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

Javascript

window.addEventListener('click', function(e){   

   if (document.getElementById('menuBar').contains(e.target)){

       console.log('clicked inside');

       // toggle your menu according to your requirements

   } else{

       // toggle your menu according to your requirements

       console.log('clicked outside');

   }

});

Answer 3

使用这个 Jquery

$(document).click(function () {

        //Write your code here 

    });

这意味着当您在该部分之外单击时，您各自的代码将运行