古怪的引导菜单切换行为

Question

当你打开页面时，我有一个navbar来显示一个标语，并且是切换按钮所在的条。有第二个navbar是切换按钮的目标。它显示为侧菜单。您必须单击切换器按钮2次才能使菜单正确地开始切换。

    <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>

其行为是，当您第一次打开页面时，菜单navbar已经显示。这是所希望的行为。但是你必须点击切换按钮2次才能使侧边菜单折叠，它确实在第二次关闭时折叠。并且在这个点之后它会适当地展开/折叠。但是，如果您转到菜单上的另一个链接或刷新页面，则需要单击2次切换按钮才能开始正常工作。

有什么想法可以让我立即开始工作吗？

非常感谢，肯特

Answer 1

相关问题

Answer 2

将折叠显示类添加到第二个navbar。第二个navbar的HTML应为