Question

打开页面时，我有一个导航栏来显示标语，并且是切换按钮所在的栏。第二个导航栏是切换按钮的目标。它显示为侧面菜单。您必须单击切换开关按钮两次才能使菜单开始正确切换。

    <style>
    #menu li a {
      line-height: 22px;
      height: 22px;
      width: 160px;
      background-size: auto;
      text-align: right;
      padding-top: 0px;
      color: #eee;
    }

    #menu {
      min-width: 210px;
    }

    .fa-bars {
      color: white;
    }

    .businessAddress li {
       list-style-type: none;
       font-size: 14px;
       text-align: right;
       margin: 0;
       color: #eee;
    }
    </style>

    <div class="container">
      <div>
        <h1>
          Company Header
        </h1>
      </div>
      <div class="navbar bg-success">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="False" aria-label="Toggle navigation">
            <span><i class="fa fa-bars"></i></span>
        </button>
        <h2 class="mx-auto">
           Slogan
        </h2>
      </div>
      <div class="row">
        <div class="col-md-3">
          <div class="navbar bg-success" id="menu">
            <ul class="navbar-nav">
               <li class="navItem active"><a href="#">Home Link</a></li>
               <li class="navItem"><a href="#">Services Link</a></li>
               <li class="navItem"><a href="#">Contact Link</a></li>
            </ul>
            <ul class="businessAddress d-none d-md-block">
              <li>&nbsp;</li>
              <li>Company Name</li>
              <li>Street Address</li>
              <li>City, ST Zip</li>
              <li>&nbsp;</li>
              <li>123-456-7890</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

其行为是，当您第一次打开页面时，菜单导航栏已经显示。这是所需的行为。但是您必须按一下切换器按钮两次才能使侧面菜单折叠，并且在第二次折叠时确实折叠。在此之后，它将正确扩展/折叠。但是，如果您转到菜单上的其他链接或刷新页面，则切换按钮需要2次单击才能开始正常工作。

关于如何获取切换开关以立即开始工作的任何想法？

非常感谢，肯特

Answer 1

将collapse show类添加到第二个导航栏中。第二个导航栏的HTML应该为<div class="navbar bg-success collapse show" id="menu">

古怪的Bootstrap菜单切换行为

1 个答案: