Bootstrap 3移动端导航栏：预期悬停效果未出现

Hey there! Let’s sort out this Bootstrap navbar problem you’re having. It’s super common for desktop behavior to work smoothly but hit snags on mobile—here’s how to get both the active submenu background color and automatic menu collapse working right:

1. First, Let’s Confirm the Navbar Structure #

Make sure your HTML follows Bootstrap’s standard dropdown pattern (adjust classes if you’re using Bootstrap 5 instead of 4):

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Your Store</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="mainNavbar">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="aboutDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          About
        </a>
        <div class="dropdown-menu" aria-labelledby="aboutDropdown">
          <a class="dropdown-item" href="#store-hours">Store Hours</a>
          <a class="dropdown-item" href="#location">Location</a>
          <a class="dropdown-item" href="#team">Our Team</a>
        </div>
      </li>
      <!-- Add other nav items here -->
    </ul>
  </div>
</nav>

2. Add Custom CSS for Persistent Active Background #

Bootstrap’s default .dropdown-item:active only styles the link during the click. To keep the background color after clicking, add this CSS:

/* Style for active submenu item (persists after click) */
.dropdown-item.active {
  background-color: #007bff; /* Replace with your brand color */
  color: white; /* Optional: Adjust text color for better contrast */
}

/* Keep the default click-state style for immediate feedback */
.dropdown-item:active {
  background-color: #0056b3; /* Darker shade for hover/click interaction */
}

3. JavaScript to Handle Active State & Mobile Collapse #

The main mobile issue is that Bootstrap doesn’t automatically close the navbar collapse when you click a dropdown subitem. We’ll fix that with a simple click handler, plus manage the active class:

For Bootstrap 4 (using jQuery): #

$('.dropdown-item').on('click', function() {
  // Remove active class from all submenu items to reset state
  $('.dropdown-item').removeClass('active');
  // Add active class to the clicked item
  $(this).addClass('active');
  
  // Manually close the mobile navbar collapse
  $('#mainNavbar').collapse('hide');
});

For Bootstrap 5 (vanilla JS): #

If you’re using Bootstrap 5, note that data attributes use data-bs-* and the collapse API is slightly different:

document.querySelectorAll('.dropdown-item').forEach(item => {
  item.addEventListener('click', function() {
    // Reset active state for all submenu items
    document.querySelectorAll('.dropdown-item').forEach(i => i.classList.remove('active'));
    // Mark the clicked item as active
    this.classList.add('active');
    
    // Close the mobile navbar using Bootstrap 5's Collapse API
    const navbarCollapse = document.getElementById('mainNavbar');
    const collapseInstance = new bootstrap.Collapse(navbarCollapse, {
      toggle: false
    });
    collapseInstance.hide();
  });
});

Why This Works #

• The active class management ensures only the clicked subitem retains the background color, avoiding multiple active items at once.
• Calling collapse('hide') (Bootstrap 4) or using the bootstrap.Collapse API (Bootstrap 5) manually triggers the mobile navbar to fold up—this isn’t a default behavior for dropdown subitems, which is why your mobile setup was acting up.

Give this code a test—this should match the smooth desktop behavior you already have, but now work correctly on mobile too. If you run into issues with specific Bootstrap versions or custom styles, feel free to tweak the selectors or colors to fit your store’s design!

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