嘗試通過單擊打開它的 div 中斷按鈕外部來關閉彈出窗口

Question

我有一個使用 jquery 的按鈕打開的移動/響應式導航菜單。 該按鈕工作得很好，直到我添加了一個 jquery 腳本來關閉 window 如果用戶單擊菜單 div 之外的任何位置，該腳本也可以按預期在任何地方關閉菜單，除非嘗試使用初始菜單按鈕，這贏得了't function 如果我嘗試用它關閉菜單（但如果它關閉，仍然可以用來再次打開菜單）。

誰能幫我弄清楚為什么按鈕本身不起作用？

  $(document).ready(function() {
    var mobileNav = $('#mobile-nav');

    //Toggle hide on the menu
    $('.btn-navbar').on('click', function(){
      mobileNav.toggleClass('d-none');
    });

    // Hide menu if clicked outside
    $(document).mouseup(function(e){
      if (!mobileNav.is(e.target) && mobileNav.has(e.target).length === 0 && !mobileNav.hasClass('d-none')){
        $('#mobile-nav').toggleClass('d-none');
      }

    });
     
  });

Answer 1

由於mouseup事件在click事件之前觸發，因此當您單擊.btn-navbar實際上首先運行與mouseup相關的處理程序，並在 mobileNav 上切換mobileNav d-none ，之后與單擊相關的處理程序運行，然后再次切換mobileNav 上的d-none mobileNav ，因此它的顯示永遠不會改變，為了解決它們的問題，在mouseup處理程序中，您可以檢查目標元素是否不是.btn-navbar然后切換d-none class，如下所示：

$(document).mouseup(function(e){
  if (!$(e.target).is('.btn-navbar') && !mobileNav.is(e.target) && mobileNav.has(e.target).length === 0 && !mobileNav.hasClass('d-none')){
    $('#mobile-nav').toggleClass('d-none');
  }
});

這是一個簡單的例子：

 $(document).ready(function() { var mobileNav = $('#mobile-nav'); //Toggle hide on the menu $('.btn-navbar').on('click', function() { mobileNav.toggleClass('d-none'); }); $(document).mouseup(function(e) { if (.$(e.target).is('.btn-navbar') &&.mobileNav.is(e.target) && mobileNav.has(e.target).length === 0 &&;mobileNav;hasClass('d-none')) { $('#mobile-nav');toggleClass('d-none'); } }); });

 .d-none { display: none } #mobile-nav { background: red }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <button class="btn-navbar">Toggle nav</button> <h1 id="mobile-nav" class="d-none">nav content</h1>

Answer 2

我不確定為什么，但按鈕不喜歡 $(document) 聲明...我現在使用相同的 function 但使用主要內容 div 的 id