Bootstrap 4导航栏切换功能异常问题求助

Hey there, let's tackle this Bootstrap navbar issue you're facing with your Underscores-based WordPress theme! I've run into similar quirks before, so here's what's likely going on and how to fix it:

1. Conflicting HTML Structure or Missing Bootstrap Classes #

Bootstrap's mobile navbar relies on specific classes to manage its collapsed state, and Underscores' default navigation markup might be clashing with this.

• Check your toggle button: Make sure it has the collapsed class by default, along with correct ARIA attributes. This tells Bootstrap the navbar starts in a closed state:

  <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#your-navbar-id" aria-controls="your-navbar-id" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  

• Verify the menu container: The div wrapping your menu items must have collapse navbar-collapse classes. Bootstrap uses collapse to hide the menu by default on mobile. If Underscores' CSS is overriding this, the menu will stay open.

2. JavaScript Conflicts or Duplicate Initialization #

Underscores comes with its own navigation.js script that handles menu toggling, and this can clash with Bootstrap's navbar JS.

• Check script loading in functions.php: Ensure Bootstrap's JS (use bootstrap.bundle.min.js since it includes Popper, required for navbar functionality) is loaded only once, and after jQuery (if using Bootstrap 4 or earlier). Example:

  function my_theme_enqueue_scripts() {
      // Load Bootstrap CSS
      wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css' );
      // Load Bootstrap JS (includes Popper)
      wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.bundle.min.js', array(), '5.3.0', true );
      // Load theme JS (depend on Bootstrap to avoid race conditions)
      wp_enqueue_script( 'my-theme-js', get_template_directory_uri() . '/js/custom.js', array('jquery', 'bootstrap-js'), '1.0', true );
  }
  add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
  

• Disable Underscores' default menu JS: Temporarily comment out the navigation.js enqueue in your theme's functions.php to test if it's causing the conflict. If that fixes the issue, you can either remove it entirely or modify its code to avoid overlapping with Bootstrap's toggle logic.

3. CSS Priority Overrides #

Underscores' base styles might be overriding Bootstrap's collapse class, forcing the menu to stay visible.

• Inspect with dev tools: Open your browser's developer tools, check the menu container's display property. If it's set to block instead of none on mobile, add custom CSS to enforce Bootstrap's behavior:

  @media (max-width: 991.98px) { /* Match Bootstrap's md breakpoint */
      .navbar-collapse.collapse {
          display: none !important;
      }
      .navbar-collapse.collapse.show {
          display: block !important;
      }
  }
  

  Try to avoid !important if possible by using more specific selectors (e.g., body .navbar-collapse.collapse) instead.

4. Incorrect ARIA Attribute Values #

Bootstrap uses the aria-expanded attribute on the toggle button to track the navbar's state. If this is set to true by default, the menu will open on page load.

• Double-check that your toggle button has aria-expanded="false" initially. Bootstrap's JS will automatically flip this value when the button is clicked, so a wrong initial value can cause the weird "collapse then re-expand" behavior.

Start with the HTML structure checks first—those are usually the quickest fixes for this type of issue!

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