Bootstrap导航子菜单互斥关闭功能实现求助

To ensure only one submenu stays open at a time within your megamenu, you'll need custom JavaScript to handle closing other open submenus when a new one is triggered. Here's the implementation:

Step 1: Add the Custom JavaScript #

Insert this script before your closing </body> tag to manage submenu state:

document.addEventListener('DOMContentLoaded', function() {
  // Target all submenu toggles inside the megamenu
  const submenuToggles = document.querySelectorAll('.megamenu .dropdown-toggle');
  
  submenuToggles.forEach(toggle => {
    // Listen for when a submenu starts opening
    toggle.addEventListener('show.bs.dropdown', function() {
      // Get the parent megamenu container
      const megamenu = this.closest('.megamenu');
      
      // Find all currently open dropdowns in the same megamenu
      const openDropdowns = megamenu.querySelectorAll('.dropdown.show');
      
      // Close each open dropdown except the one being activated
      openDropdowns.forEach(dropdown => {
        if (dropdown !== this.closest('.dropdown')) {
          const dropdownInstance = bootstrap.Dropdown.getInstance(dropdown);
          if (dropdownInstance) {
            dropdownInstance.hide();
          }
        }
      });
    });
  });
});

Step 2: Verify Existing Data Attributes #

Your submenu toggles already have data-bs-auto-close="true", which handles closing when clicking outside the submenu. No changes are needed here, but this attribute works alongside the custom script for full functionality.

Updated Full Code #

Here's your complete HTML with the script included:

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <div class="container-fluid"> 
    <a class="navbar-brand" href="#"> LOGO </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
    </button>
    
    <!-- start test -->
    
    <div class="row navbar-collapse" id="navbarCollapse">
      <div class="col-md-12 order-last menu-one"> 
        <!-- start-->
        <ul class="navbar-nav ms-auto mb-2 mb-md-0 nav navbar-right justify-content-end">
          <hr class="white d-block d-md-none">
          <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">login </a> </li>
          <li class="nav-item"> <a class="nav-link" href="#">support <span class="text-ltred">1300 000 123</span></a> </li>
          <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">  Global sites </a>
            <ul class="dropdown-menu dropdown-menu-end">
              <li><a class="dropdown-item" href="#">United States / Canada</a></li>
              <li><a class="dropdown-item" href="#">New Zealand</a></li>
            </ul>
          </li>
          <li class="nav-item" id="search">
            <div class="search-box nav-link">
              <input type="text" class="search-input" placeholder="Search">
              <a class="search-btn" href="#"> ? </a> 
            </div>
          </li>
        </ul>
        <!-- end --> 
      </div>
      <div class="col-md-12 order-md-last menu-two"> 
        <!-- start-->
        <ul class="navbar-nav ms-auto mb-2 mb-md-0 nav navbar-right justify-content-end">
          <li class="nav-item dropdown has-megamenu"> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Solutions &amp; services</a>
            <div class="dropdown-menu megamenu" role="menu">
              <div class="row g-3">
                <div class="col-md-6 col-12">
                  <div class="col-megamenu">
                    <h6 class="title">Solutions &amp; services</h6>
                    <ul class="list-unstyled">
                      <li class="dropend"> <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" data-bs-auto-close="true" aria-expanded="false">Leasing solutions</a>
                        <ul class="dropdown-menu no-border">
                          <li><a class="dropdown-item" href=""> Transfer my fleet</a></li>
                          <li><a class="dropdown-item" href=""> Start a new fleet</a></li>
                          <li><a class="dropdown-item" href=""> Electric vehicles</a></li>
                          <li><a class="dropdown-item" href=""> Next lease</a></li>
                          <li><a class="dropdown-item" href=""> Trucks, plant &amp; equipment</a></li>
                          <li><a class="dropdown-item" href=""> Used vehicles</a></li>
                        </ul>
                      </li>
                      <li class="dropend"> <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" data-bs-auto-close="true" aria-expanded="false">Fleet management services</a>
                        <ul class="dropdown-menu no-border">
                          <li><a class="dropdown-item" href=""> Accident management</a></li>
                          <li><a class="dropdown-item" href=""> Acquisition and disposals</a></li>
                          <li><a class="dropdown-item" href=""> Driver safety</a></li>
                          <li><a class="dropdown-item" href=""> Fleet card</a></li>
                          <li><a class="dropdown-item" href=""> Hire vehicles</a></li>
                          <li><a class="dropdown-item" href=""> Infringement management</a></li>
                          <li><a class="dropdown-item" href=""> Insurance</a></li>
                          <li><a class="dropdown-item" href=""> Maintenance</a></li>
                          <li><a class="dropdown-item" href=""> PoolCar sharing platform</a></li>
                          <li><a class="dropdown-item" href=""> Registration</a></li>
                          <li><a class="dropdown-item" href=""> Roadside assistance</a></li>
                          <li><a class="dropdown-item" href=""> Telematics</a></li>
                          <li><a class="dropdown-item" href=""> Toll management</a></li>
                        </ul>
                      </li>
                      <li class="dropend"> <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" data-bs-auto-close="true" aria-expanded="false">Fleet optimisation</a>
                        <ul class="dropdown-menu no-border">
                          <li><a class="dropdown-item" href=""> Corporate financing</a></li>
                          <li><a class="dropdown-item" href=""> Leasing</a></li>
                          <li><a class="dropdown-item" href=""> Sales and lease back</a></li>
                          <li><a class="dropdown-item" href=""> Strategic consulting</a></li>
                          <li><a class="dropdown-item" href=""> Technology integration</a></li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                  <!-- col-megamenu.// --> 
                </div>
                <!-- end col-3 --> 
                
              </div>
              <!-- end row --> 
            </div>
            <!-- dropdown-mega-menu.// --> 
          </li>
          <li class="nav-item"> <a class="nav-link" href="#">Driver Support</a></li>
          <li class="nav-item"> <a class="nav-link" href="#">About</a></li>
          <li class="nav-item"> <a class="nav-link" href="#">News</a></li>
          <li class="nav-item"> <a class="nav-link" href="#">Resources</a></li>
          <li class="nav-item"> <a class="btn btn-bd-primary" href="#" role="button">Contact us</a></li>
        </ul>
        <!-- end --> 
      </div>
    </div>
    
    <!-- end test --> 
    
  </div>
</nav>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const submenuToggles = document.querySelectorAll('.megamenu .dropdown-toggle');
  
  submenuToggles.forEach(toggle => {
    toggle.addEventListener('show.bs.dropdown', function() {
      const megamenu = this.closest('.megamenu');
      const openDropdowns = megamenu.querySelectorAll('.dropdown.show');
      
      openDropdowns.forEach(dropdown => {
        if (dropdown !== this.closest('.dropdown')) {
          const dropdownInstance = bootstrap.Dropdown.getInstance(dropdown);
          if (dropdownInstance) {
            dropdownInstance.hide();
          }
        }
      });
    });
  });
});
</script>

How It Works #

• The script listens for Bootstrap's show.bs.dropdown event on each submenu toggle.
• When a submenu is activated, it identifies all other open submenus in the same megamenu.
• It uses Bootstrap's native Dropdown API to close those open submenus, ensuring only the clicked submenu remains visible.

内容的提问来源于stack exchange，提问作者babithao