使用 Bootstrap，如何在外部单击后关闭菜单？

Posted 2023-03-05

【中文标题】使用 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');
     // 
     );
     );

解决了这个问题。