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

添加事件以触发单击操作，然后跟踪是否包含菜单。我举一个例子，希望它能帮助您解决问题。

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 2

使用此Jquery

$(document).click(function () { //Write your code here });

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

Answer 3

尝试一下。我添加了初始样式来隐藏菜单。然后，您可以使用菜单按钮或单击文档来显示菜单。

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

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

3 个答案: