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

【问题标题】：Using Boostrap, how can I make a menu close after clicking outside?使用 Bootstrap，如何在外部单击后关闭菜单？
【发布时间】：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，但不知道从哪里开始。

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

添加

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

解决了这个问题。

【讨论】：