javascript - Bootstrap 始终打开响应式导航栏

Question

我希望当有人打开它时，必须打开菜单，而不需要单击按钮来打开它。当有人单击按钮时，将其关闭而不是打开。

有人可以帮我吗？我怎样才能达到结果？

<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">
        <button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" 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">
        <div class="navbar-collapse collapse" id="mc-horizontal-menu-collapse" style="height: 0px;">
          <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 &amp; refills</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

是的，通过将 show 类与 collapse 一起使用，您将在示例代码中看到它:

<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">
        <button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" 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">
        <div class="navbar-collapse collapse show" id="mc-horizontal-menu-collapse" style="height: 0px;">
          <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 &amp; refills</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>