在MVC项目中有一个侧栏，从DB创建并在视图中注入HTML。
总的来说，除了两个烦人的特质外，它的效果很好。
这需要反过来
可能是一个简单的CSS问题，但经过它没有任何跳出来。
生成的HTML是
div class="nav-side-menu">
<div class="brand">Band Name</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li data-toggle="collapse" class="collapsed active"><a href="#1"><i class="fa fa-gift fa-lg"></i>Overview<span class="arrow"></span></a></li>
<li data-toggle="collapse" class="collapsed active"><a href="#2"><i class="fa fa-gift fa-lg"></i>Terms of Use (Licence)<span class="arrow"></span></a></li>
<li data-toggle="collapse" class="collapsed active"><a href="#3"><i class="fa fa-gift fa-lg"></i>System Requirements<span class="arrow"></span></a></li>
<li data-toggle="collapse" class="collapsed active"><a href="#4"><i class="fa fa-gift fa-lg"></i>Installation<span class="arrow"></span></a></li>
<li data-toggle="collapse" data-target="#5" class="collapsed active">
<a><i class="dropdown-toggle" data-toggle="dropdown"></i>Message Centre <span class="caret" ></span></a>
<ul class="sub-menu collapse" id="5">
<li><a href="#6">News</a></li>
<li><a href="#7">Communications</a></li>
</ul>
</li>
<li data-toggle="collapse" data-target="#8" class="collapsed active">
<a><i class="dropdown-toggle" data-toggle="dropdown"></i>Website <span class="caret"></span></a>
<ul class="sub-menu collapse" id="8">
<li><a href="#9">Login</a></li>
</ul>
</li>
</ul>
</div>
</div>
，CSS是
<style>
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 300px;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
@media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
@media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
#main {
width: calc(100% - 300px);
float: right;
}
}
body {
margin: 0px;
padding: 0px;
}
</style>
答案 0 :(得分：2)
对于第一个问题，您可以使用id：
简单地包装菜单的accordion部分<div class="accordion-group">
然后添加此JS代码来修复您的手风琴问题：
/* ensure any open panels are closed before showing selected */
$('.accordion-group').on('show.bs.collapse', function () {
$('.accordion-group .in').collapse('hide');
});
对于第二个问题，您只需将data-toggle="collapse"和data-target="#5"移动到子菜单的a元素，以便锚点是唯一可以切换崩溃的内容（不是包含其所有内容的整个列表项。）
<li class="collapsed active">
<a data-toggle="collapse" data-target="#5"><i></i>Message Centre <span class="caret" ></span></a>
...
</li>
演示： JSFiddle