...菜单项保持活动状态。但从一开始： 我有一个网站，响应顶部菜单有bootstrap（工作，最小化菜单toogle到下拉按钮）和侧面菜单作为nav-pills，选择选项卡窗格。 由于保持响应，我使用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 -->
一切似乎都很好，在最小化窗口后，nav-pills菜单显示出来并显示下拉按钮。我可以按下按钮，出现下拉菜单，我可以单击菜单条目，将显示项目部分。 但我只能点击每个菜单项一次。下拉列表中的项目保持活动状态，这些项目无法再执行任何操作。由于我使用Javascript的弱点，我只使用带有html和css的bootstrap，我不知道出了什么问题。 提前感谢您提供解决问题的提示，并更好地了解后台发生的情况。 最好的祝福， 拉尔夫
我添加了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;
}
答案 0 :(得分：2)
经过多次尝试和大量研究，我发现不是真正的原因，而是一个有效的解决方案。我在JQuery脚本之后添加了以下代码：
$(function () {
$('.dropdown-menu a').click(function (e) {
$('.active').removeClass('active');
});
});
使用此功能对我来说已经足够了。 最好的祝福， 拉尔夫
答案 1 :(得分：1)
对我来说，将属性data-target="#navItemGame"添加到<a>类的dropdown-menu类的#id可以解决我的问题。简单添加data-target和id="myID"太棒了。
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" data-
target="#navItemGame">GAME</
<ul class="dropdown-menu" id="navItemGame">
<li><a href="#">MODE 1</a></li>
<li><a href="#">MODE 2</a></li>
<li><a href="#">MODE 3</a></li>
</ul>
</li>
答案 2 :(得分：0)
基于Bootstap文档，带有切换菜单项的导航栏必须类似以下代码：
<ul class="nav nav-tabs">
<li class="dropdown" style="float: right;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Filters</a>
<ul class="dropdown-menu">
<li><a href="#">Most Sealers</a></li>
<li><a href="#">Newest</a></li>
</ul>
</li>
<li class="active"><a href="#">Group 1</a></li>
<li><a href="#">Group 2</a></li>
<li><a href="#">Group 3</a></li>
</ul>
但这无法正常工作，然后我将示例更改如下并工作：
<ul class="nav nav-tabs" id="ulnav">
<li class="dropdown" style="float: right;">
<a id="lk1" href="#" onclick="BShameMenu();">Filters <span class="caret"></span></a>
<ul class="dropdown-menu" id="lk1ul">
<li><a href="#" onclick="jQuery('#lk1').click();">Most Sealers</a></li>
<li><a href="#" onclick="jQuery('#lk1').click();">Newest</a></li>
</ul>
</li>
<li class="active"><a href="#" onclick="BShameMenu2(jQuery(this));">Group 1</a></li>
<li><a href="#" onclick="BShameMenu2(this);">Group 2</a></li>
<li><a href="#" onclick="BShameMenu2(this);">Group 3</a></li>
</ul>
<script>
function BShameMenu() {
jQuery('#lk1ul').toggle();
}
function BShameMenu2(el) {
if (jQuery('#lk1ul').is(':visible')) { jQuery('#lk1').click(); }
jQuery('#ulnav li').removeClass('active');
jQuery(el).parent().addClass('active');
}
</script>