Bootstrap响应式导航栏默认展开及反向切换功能求助

Alright, let's tackle this Bootstrap 4 navbar tweak you need. You want it to be fully expanded right when the page loads, and clicking the menu button should collapse it instead of opening it. Here's the step-by-step fix:

1. Adjust the Navbar Content's Initial Visibility #

The original navbar-collapse element uses the collapse class (which hides content by default) plus an inline height: 0px style forcing it closed. We need to:

• Swap collapse with Bootstrap 4's show class (this makes the collapsed content visible by default)
• Remove the inline height: 0px style that overrides the show class

2. Fix the Toggle Button's State #

The button has the collapsed class, which tells Bootstrap the navbar is currently closed (so clicking it triggers an open). Remove this collapsed class so Bootstrap recognizes the navbar is open, and clicking the button will trigger a collapse instead.

3. Optional: Explicit Toggle Logic (If Needed) #

In most cases, the above changes are enough, but if you run into any edge case behavior, add this small jQuery snippet to ensure the toggle works as expected (though Bootstrap's default JS should handle it once states are corrected):

$(document).ready(function() {
  $('.navbar-toggle').on('click', function() {
    $('#mc-horizontal-menu-collapse').toggleClass('show');
  });
});

Modified Full Code #

<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="header-nav animate-dropdown">
  <div class="container">
    <div class="yamm navbar navbar-default" role="navigation">
      <div class="navbar-header">
        <!-- Removed "collapsed" class from button -->
        <button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle" type="button" style="background-color: rgb(0, 108, 180);width: 100%;">
          <span class="sr-only">Toggle navigation</span>
          <span style="font-size: 22px;color: #fff;text-align: center;width: 100%;">Menu</span>
        </button>
      </div>
      <div class="nav-bg-class">
        <!-- Changed "collapse" to "show" and removed inline height style -->
        <div class="navbar-collapse show" id="mc-horizontal-menu-collapse">
          <div class="nav-outer">
            <ul class="nav navbar-nav">
              <li class="active dropdown yamm-fw">
                <a href="http://vsss.co.in/index.php/Home" data-hover="dropdown" class="dropdown-toggle disabled" data-toggle="dropdown">Home</a>
              </li>
              <li class="dropdown mega-menu">
                <a href="#" data-hover="dropdown" class="dropdown-toggle" data-toggle="dropdown">Category</a>
                <ul class="dropdown-menu container">
                  <li>
                    <div class="yamm-content">
                      <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-3 col-menu">
                          <ul class="links">
                            <li><a href="http://vsss.co.in/index.php/Category/view/24" class="nav_item">Premium pens</a></li>
                            <li><a href="http://vsss.co.in/index.php/Category/view/22" class="nav_item">Pens & refills</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

This setup will make your navbar load in an expanded state, and clicking the "Menu" button will collapse it. Clicking the button again will re-expand it, maintaining standard toggle behavior but starting from the open state.

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