Bootstrap移动端子菜单默认展开求助：保持‘ADDITIONAL FEATURES’闭合

Hey there! I totally get how frustrating it is when desktop menus work perfectly but mobile throws a curveball. Let's walk through the most common fixes to get that "ADDITIONAL FEATURES" submenu staying closed on mobile.

1. Check Your HTML's Default State #

First, make sure your submenu isn't marked as expanded right out the gate. If you're using Bootstrap (which your collapse and navbar-collapse classes suggest), the submenu container should not have the show class, and the toggle button should have aria-expanded="false".

Here's what a corrected snippet might look like:

<div class="collapse navbar-collapse mega-menu navbar-responsive-collapse">
  <div class="container">
    <ul class="nav navbar-nav">
      <!-- Other menu items -->
      <li class="nav-item dropdown">
        <a 
          class="nav-link dropdown-toggle" 
          href="#" 
          id="additionalFeaturesToggle"
          data-bs-toggle="collapse"
          data-bs-target="#additionalFeaturesSubmenu"
          aria-expanded="false" <!-- Critical: Set to false initially -->
          aria-controls="additionalFeaturesSubmenu"
        >
          ADDITIONAL FEATURES
        </a>
        <div class="collapse" id="additionalFeaturesSubmenu"> <!-- No "show" class here -->
          <ul class="nav flex-column">
            <li class="nav-item"><a href="#">Feature A</a></li>
            <li class="nav-item"><a href="#">Feature B</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>

2. Hunt for Overriding CSS Media Queries #

Sometimes mobile-specific CSS forces the submenu to display. Check your stylesheets for media queries targeting mobile (usually max-width: 768px) that might have something like this:

@media (max-width: 768px) {
  .mega-menu .dropdown-menu {
    display: block !important; /* This forces the submenu open */
  }
}

If you find this, remove the !important rule or adjust the selector to only apply when the submenu is actively toggled. Replace it with:

@media (max-width: 768px) {
  .mega-menu .dropdown-menu {
    display: none;
  }
  .mega-menu .dropdown-menu.show {
    display: block;
  }
}

3. Fix JavaScript Initialization Issues #

It's possible your menu's JS is automatically expanding the submenu on mobile load. If you're using Bootstrap's Collapse component, initialize it with toggle: false to prevent auto-expansion:

document.addEventListener('DOMContentLoaded', function() {
  const submenu = document.getElementById('additionalFeaturesSubmenu');
  // Ensure the submenu starts closed
  if (submenu.classList.contains('show')) {
    submenu.classList.remove('show');
  }
  // Initialize collapse with no auto-toggle
  new bootstrap.Collapse(submenu, { toggle: false });
});

If you're using jQuery (older Bootstrap versions), use this instead:

$(document).ready(function() {
  $('#additionalFeaturesSubmenu').collapse({
    toggle: false
  });
});

4. Check Mega-Menu Plugin Settings #

If you're using a pre-built mega-menu plugin, it might have a default setting to expand all submenus on mobile. Look for options like mobileCollapseAll, defaultClosedMobile, or similar in the plugin's documentation or initialization code. Enabling this will force all submenus to stay closed until the user taps the toggle.

Start with checking the HTML default state first—this is the most common culprit. If that doesn't work, move through the CSS and JS checks, and you should have that submenu behaving correctly on mobile in no time!

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