古怪的引导菜单切换行为

Question

当您打开页面时，我有一个导航栏来显示标语，并且是切换按钮所在的栏。第二个导航栏是切换按钮的目标。它显示为侧面菜单。您必须单击切换按钮 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>

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

关于如何让切换开关立即开始工作有什么想法吗？

非常感谢， 肯特

Answer 1

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