尝试通过单击打开它的 div 中断按钮外部来关闭弹出窗口

Posted 2023-02-22

【中文标题】尝试通过单击打开它的 div 中断按钮外部来关闭弹出窗口

【英文标题】：Trying to close popup by clicking outside of div breaks button that opened it

【发布时间】：2022-01-23 23:22:45

【问题描述】：

我有一个使用 jquery 的按钮打开的移动/响应式导航菜单。该按钮运行良好，直到我添加了一个 jquery 脚本以在用户单击菜单 div 之外的任何位置时也关闭窗口，该脚本也可以按预期在任何地方关闭菜单，除非尝试使用初始菜单按钮，这赢得了'如果我尝试用它关闭菜单，它就不起作用（但如果它关闭，仍然可以用来再次打开菜单）。

谁能帮我弄清楚为什么按钮本身不起作用？

  $(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');
      

    );
     
  );

【参考方案1】：

我不确定为什么，但按钮不喜欢 $(document) 声明...我现在使用相同的函数，但使用主要内容 div 的 id

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案2】：

由于mouseup 事件在click 事件之前触发，所以当您单击.btn-navbar 时，实际上首先与mouseup 相关的处理程序运行，然后它在mobileNav 上切换d-none 类，之后与点击运行相关的处理程序，它再次切换mobileNav上的d-none类，因此它的显示永远不会改变，为了解决它们的问题，在mouseup处理程序中，您可以检查目标元素是否不是@ 987654330@ 然后切换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');
  
);

这是一个简单的例子：

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