引导下拉侧边菜单仅工作一次

...和菜单项保持活动状态。但从一开始：我有一个带有引导程序的响应式顶部菜单的网站(工作，在将菜单toogle最小化为下拉按钮之后(和一个侧菜单作为导航药丸，它选择选项卡窗格。由于保持响应，我使用CSS(xs-toogle和xs-collapse(在最小宽度后隐藏侧边菜单，并将按钮显示为下拉菜单。这里有相关代码：

   <div class="container-fluid">
     <div class="row">
       <div class="col-xs-1 col-sm-3">
                <div class="dropdown">
                    <!-- show after >=768 width -->
                    <button type="button" class="btn btn-default dropdown-toggle xs-toggle" id="dropmenu" data-toggle="dropdown">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>   
                    <ul class="nav nav-pills nav-stacked dropdown-menu" role="menu" aria-labelledby="dropmenu" aria-haspopup="true" aria-expanded="false">
                        <li class="nav-item" role="presentation"><a role="menuitem" class="dropdown-item nav-link" tabindex="-1" href="#goitem1" data-toggle="pill">Item1</a></li>
                        <li class="nav-item" role="presentation"><a role="menuitem" class="dropdown-item nav-link" tabindex="-1" href="#goitem2" data-toggle="pill">Item2</a></li>
                        <li class="nav-item" role="presentation"><a role="menuitem" class="dropdown-item nav-link" tabindex="-1" href="#goitem3" data-toggle="pill">Item3</a></li>
                    </ul>
                    <!-- hide after <768 width -->
                    <ul class="nav nav-pills nav-stacked xs-collapse" id="TabItems">
                        <li class="active"><a href="#goitem1" data-toggle="pill">Item1</a></li>
                        <li><a href="#goitem2" data-toggle="pill">Item2</a></li>
                        <li><a href="#goitem3" data-toggle="pill">Item3</a></li>
                    </ul>
                </div> <!-- dropdown -->
            </div> <!-- col -->
            <div class="col-xs-10 col-sm-7">
                <div class="maincontent">
                  <div class="tab-content">
                    <div class="tab-pane active fade in" id="goitem1">
                        <div class="row">
                            <div class="col-xs-12 col-sm-6">
                                <h1 class="flyer">CONTENT</h1>
                            </div> <!-- col -->
                            <div class="col-xs-0 col-sm-6 deco">
                                <h1 class="flyer">CONTENT</h1>
                            </div>
                        </div> <!-- row -->
                    </div> <!-- tab-pane -->
                    <div class="tab-pane fade" id="goitem2">
                        <div class="row">
                            <div class="col-xs-12 col-sm-6">
                                <h1 class="flyer">CONTENT</h1>
                            </div>
                            <div class="col-xs-0 col-sm-6 deco">
                                <h1 class="flyer">CONTENT</h1>
                            </div>
                        </div> <!-- row -->
                    </div> <!-- tab-pane -->
                    <div class="tab-pane fade" id="goitem3">
                        <div class="row">
                            <div class="col-xs-12 col-sm-6">
                                <h1 class="flyer">CONTENT</h1>
                            </div>
                            <div class="col-xs-0 col-sm-6 deco">
                                <h1 class="flyer">CONTENT</h1>
                            </div>
                        </div> <!-- row -->
                    </div> <!-- tab-pane -->
                  </div> <!-- tab-content -->
                </div> <!-- maincontent -->
            </div> <!-- col -->
        </div> <!-- row -->
      </div> <!-- container -->

一切似乎都很好，最小化窗口后，导航药丸菜单消失并出现下拉按钮。我可以按下按钮，出现下拉列表，我可以单击菜单条目，将显示项目部分。但我只能单击每个菜单项一次。下拉列表中的项目保持活动状态，无法对这些项目执行更多操作。由于我在Javascript上的弱点，我只使用带有html和css的引导程序，我不再知道出了什么问题。提前感谢您给我提示以解决问题并更好地了解后台发生的事情。此致敬意拉尔夫

我添加了 CSS：

/* Seitenmenu Angebote*/
/* +++ HAUPTSEITE +++ */
.maincontent{
    background-color: #ffffff;
color: #000;
    opacity: 0.9;
    padding: 5%;
    border: 10px outset #d22814;
}
.xs-collapse {
  display: none;
  visibility: hidden;
}
.xs-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}
.xs-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}
.btn-default.xs-toggle .icon-bar {
  background-color: #888;
}
@media (min-width: 990px) {
  .xs-toggle {
    display: none;
    visibility: hidden;
  }
  .xs-collapse {
    display: block;
    visibility: visible;
  }
}
.nav-pills > li > a {
    font-size: 1.2em;
    color: #d22814;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    color: #ffffff;
    background-color: #d22814;
}
.nav-pills > li > a:hover,
.nav-pills > li > a:focus {
    background-color: #fae5e2;
}
.flyer {
    /*color: #605f5f;*/
    color: #58595b;
    font-weight: bold;
    font-size: 1.8em;
}