使用 Bootstrap,如何在外部单击后关闭菜单?

Posted

技术标签:

【中文标题】使用 Bootstrap,如何在外部单击后关闭菜单?【英文标题】:Using Boostrap, how can I make a menu close after clicking outside? 【发布时间】:2022-01-21 05:03:18 【问题描述】:

截至目前,我没有使用任何 JS 来打开/关闭汉堡菜单。我正在使用 Boostrap 的内置功能来打开/关闭它。

我的 html 代码:

<div class="container">
   <h3 class="brandname">
      <a href="javascript:void(0);" style="font-family: 'Inter', sans-serif; font-weight: 600;">Raffle<span>Hive</span></a>
   </h3>
   <a class="navbar-brand" href="javascript:void(0);"></a>
   <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
   </button>
   <div class="navbar-collapse collapse" id="navbarsExample01" style="">
      <ul class="navbar-nav ms-auto align-items-center">
         <li class="nav-item">
            <a class="nav-link active jumper" style="font-family: 'Inter', sans-serif; font-weight: 500;" aria-current="page" href="#home">Home</a>
         </li>
         <li class="nav-item ms-2">
            <a class="nav-link jumper" style="font-family: 'Inter', sans-serif; font-weight: 500;" href="#features">Features</a>
         </li>
         <li class="nav-item ms-2">
            <a class="nav-link jumper" style="font-family: 'Inter', sans-serif; font-weight: 500;" href="#statistics">Statistics</a>
         </li>
         <li class="nav-item  ms-2">
            <a class="nav-link jumper" style="font-family: 'Inter', sans-serif; font-weight: 500;" aria-current="page" href="#plans">Plans</a>
         </li>
         <li class="nav-item  ms-2">
            <a class="nav-link jumper" style="font-family: 'Inter', sans-serif; font-weight: 500;" href="#faq">FAQ</a>
         </li>
         <li class="nav-item  ms-3">
            <a class="nav-link btn btn-primary py-1 px-4" style="font-family: 'Inter', sans-serif; font-weight: 500;" href="#">Dashboard</a>
         </li>
      </ul>
   </div>
</div>

用户应该能够单击外部的任意位置(在本例中为下方)以关闭菜单,而无需单击汉堡图标。

如果我没记错的话,我相信我需要使用 JS,但不知道从哪里开始。

【问题讨论】:

【参考方案1】:

添加

     $(document).ready(function ()  
     $(document).click(function () 
     // if($(".navbar-collapse").hasClass("in"))
     $('.navbar-collapse').collapse('hide');
     // 
     );
     );

解决了这个问题。

【讨论】:

以上是关于使用 Bootstrap,如何在外部单击后关闭菜单?的主要内容,如果未能解决你的问题,请参考以下文章

如何在外部点击时关闭下拉菜单?

在内部单击时保持 Bootstrap 下拉菜单打开

防止在外部单击时以弹出模式关闭单元格编辑器

弹出框在外部单击时手动关闭:在 Safari 中不起作用

防止 MatDialog 在外部单击且未决更改时关闭

当用户在菜单外单击时,如何关闭 Bootstrap 导航栏下拉菜单?