在左侧边栏中，我只想在活动模块中保持打开点击模块的一部分，即在我当前的页面模块中，＃34; A＆＃34;处于活动状态，并且在加载页面后默认打开它。所以，目前当我点击其他模块时，他们也会打开。但我想要的是活动模块的一部分，只有最新的模块应该打开。例如A：活动并且当前打开，当我点击＆＃34; B＆＃34;模块将打开＆＃34; A＆＃34;。但是当我点击＆＃34; C＆＃34;模块模块＆＃34; B＆＃34;点击后应该关闭。
.sidebar-wrapper {
width: 200px;
position: fixed;
}
#sidebar-wrapper {
background: #F5F5F5 none repeat scroll 0 0;
height: 100vh;
position: fixed;
top: 0;
-webkit-transition: left 0.3s, -webkit-transform 2s;
transition: left 0.3s, transform 2s;
width: 200px;
border-right: 1px solid #E6E6E6;
z-index: 900;
min-height: 100%;
overflow-y: auto;
}
.sidebar-nav li a {
color: #646566;
font-size: 11px;
text-decoration: none;
display: block;
padding: 7px;
}
.sidebar-nav li a i:first-child {
float: left;
font-size: 20px;
margin-right: 6px;
position: relative;
top: -3px;
}
.sidebar-nav li ul li > a {
background: #d6d6d6;
}
.sidebar-nav li a[aria-expanded=true], .sidebar-nav li.active > a {
color: #e2e2e2;
font-family: opensans-semibold;
background: #217589;
}
.sidebar-nav li a[aria-expanded=true], .sidebar-nav li.active > a:active {
background-color: #217589;
}
.sidebar-nav li a[aria-expanded=true] i.fa-caret-right {
transform: rotate(90deg);
color: #414042;
}
.sidebar-nav li.open a {
background: #d6d6d6;
}
.sidebar-nav li ul {
margin: 0;
padding: 0;
}
.sidebar-nav li ul li {
list-style: none;
}
.sidebar-nav li ul li:hover {
border-right: 6px solid #217589;
}
.sidebar-nav li ul li a {
padding: 11px 8px 12px 39px;
}
.sidebar-nav li.active ul li.active a {
background: #217589;
color: #e2e2e2;
}
.sidebar-nav li a i.fa-caret-right {
font-size: 19px;
height: 8px;
position: absolute;
right: 10px;
top: 12px;
transition: all 0.218s ease 0s;
vertical-align: middle;
width: 7px;
color: #bababa;
}
.parent_menu {
margin-bottom: 0;
box-shadow: none;
background-color: #F5F5F5 !important;
border: 0 !important;
}
a.parent_menu_a {
background-color: #F5F5F5 !important;
color: #646566 !important;
}
a.parent_menu_a:hover {
text-decoration: none;
background-color: #eee !important;
}
.header ul.navbar-nav li a i.icon-dp {
font-size: 18px;
margin-right: 5px;
}
.header ul.navbar-nav li a i.icon-dp + span {
font-size: 11px;
}
#sidebar-wrapper li.parent_menu.active:active, #sidebar-wrapper li.parent_menu.active:focus, #sidebar-wrapper li.parent_menu.active a[aria-expanded=true], #sidebar-wrapper li.parent_menu.active a[aria-expanded=true]:active, #sidebar-wrapper li.parent_menu.active a[aria-expanded=true]:focus {
background: #e6e6e6 !important;
color: #414042 !important;
}
#sidebar-wrapper li.active > a:hover {
background: none;
text-decoration: none;
}
#sidebar-wrapper .parent_menu:hover {
background: #e6e6e6 !important;
text-decoration: none !important;
}
#sidebar-wrapper .parent_menu.active > a {
background: #e6e6e6;
color: #414042;
font-family: opensans-semibold;
}
#sidebar-wrapper ul .active {
background: #217589;
color: #e2e2e2;
}
#sidebar-wrapper ul .active:active {
background: #217589;
color: #e2e2e2;
}
.sidebar-wrapper {
z-index: 90;
}
#sidebar-wrapper.collapsed {
left: 250px;
-webkit-transition: left 0.3s, -webkit-transform 2s;
transition: left 0.3s, transform 2s;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="content-wrapper menu_visible">
<div class="grey_background"></div>
<div id="sidebar-wrapper">
<ul class="nav sidebar-nav" id="accordion" role="tablist" aria-multiselectable="false">
<li class=" active">
<a class="parent_menu_a" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseproduct" aria-expanded="true" aria-controls="collapseproduct"> <i class="fa fa-circle"></i>A<i class="fa fa-caret-right"></i> </a>
<ul aria-labelledby="headingproduct" role="tabpanel" class="panel-collapse collapse in" id="collapseproduct" aria-expanded="true" style="">
<li class=""><a href="add_new_product.html">Add new products</a></li>
<li class="active"><a href="products_check_inventory.html">Check inventory</a></li>
<li class=""><a href="products_channel_wise_mapping.html">Channel-wise mapping</a></li>
<li class=""><a href="products_search_for_items.html">Search for items</a></li>
</ul>
</li>
<li class="">
<a class="parent_menu_a" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseorder" aria-expanded="false" aria-controls="collapseorder"> <i class="fa fa-circle"></i> B <i class="fa fa-caret-right"></i> </a>
<ul aria-labelledby="headingorder" role="tabpanel" class="panel-collapse collapse" id="collapseorder" aria-expanded="false" style="">
<li class=""><a href="create_recall_requests.html">Create recall request</a></li>
<li class=""><a href="">Manage orders</a></li>
</ul>
</li>
<li class="">
<a class="parent_menu_a" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapsebilling" aria-expanded="false" aria-controls="collapsebilling"> <i class="fa fa-circle"></i>C <i class="fa fa-caret-right"></i> </a>
<ul aria-labelledby="headingbilling" role="tabpanel" class="panel-collapse collapse" id="collapsebilling" aria-expanded="false" style="">
<li class=""><a href="invoice.html">Invoice</a></li>
<li class=""><a href="pricing.html">Pricing</a></li>
</ul>
</li>
</ul>
</div>
<div class="content-area">
<div class="container-fluid">
<div style="width:40%;margin:0 auto;padding:40px;height:400px;text-align:center;background-color:black;color:red;vertical-align:middle;font-size:23px;">
Testing
</div>
</div>
</div>
<br>
<br>
<br>
</div>
答案 0 :(得分：1)
试试这个
$(document).ready(function(){
$('#accordion').on('show.bs.collapse', function (t,y) {
// do something…
$('#accordion li:not(.active) a.parent_menu_a').addClass('collapsed').attr('aria-expanded','false');
$('#accordion li:not(.active) .panel-collapse').removeClass('in');
})
});.sidebar-wrapper {
width: 200px;
position: fixed;
}
#sidebar-wrapper {
background: #F5F5F5 none repeat scroll 0 0;
height: 100vh;
position: fixed;
top: 0;
-webkit-transition: left 0.3s, -webkit-transform 2s;
transition: left 0.3s, transform 2s;
width: 200px;
border-right: 1px solid #E6E6E6;
z-index: 900;
min-height: 100%;
overflow-y: auto;
}
.sidebar-nav li a {
color: #646566;
font-size: 11px;
text-decoration: none;
display: block;
padding: 7px;
}
.sidebar-nav li a i:first-child {
float: left;
font-size: 20px;
margin-right: 6px;
position: relative;
top: -3px;
}
.sidebar-nav li ul li > a {
background: #d6d6d6;
}
.sidebar-nav li a[aria-expanded=true], .sidebar-nav li.active > a {
color: #e2e2e2;
font-family: opensans-semibold;
background: #217589;
}
.sidebar-nav li a[aria-expanded=true], .sidebar-nav li.active > a:active {
background-color: #217589;
}
.sidebar-nav li a[aria-expanded=true] i.fa-caret-right {
transform: rotate(90deg);
color: #414042;
}
.sidebar-nav li.open a {
background: #d6d6d6;
}
.sidebar-nav li ul {
margin: 0;
padding: 0;
}
.sidebar-nav li ul li {
list-style: none;
}
.sidebar-nav li ul li:hover {
border-right: 6px solid #217589;
}
.sidebar-nav li ul li a {
padding: 11px 8px 12px 39px;
}
.sidebar-nav li.active ul li.active a {
background: #217589;
color: #e2e2e2;
}
.sidebar-nav li a i.fa-caret-right {
font-size: 19px;
height: 8px;
position: absolute;
right: 10px;
top: 12px;
transition: all 0.218s ease 0s;
vertical-align: middle;
width: 7px;
color: #bababa;
}
.parent_menu {
margin-bottom: 0;
box-shadow: none;
background-color: #F5F5F5 !important;
border: 0 !important;
}
a.parent_menu_a {
background-color: #F5F5F5 !important;
color: #646566 !important;
}
a.parent_menu_a:hover {
text-decoration: none;
background-color: #eee !important;
}
.header ul.navbar-nav li a i.icon-dp {
font-size: 18px;
margin-right: 5px;
}
.header ul.navbar-nav li a i.icon-dp + span {
font-size: 11px;
}
#sidebar-wrapper li.parent_menu.active:active, #sidebar-wrapper li.parent_menu.active:focus, #sidebar-wrapper li.parent_menu.active a[aria-expanded=true], #sidebar-wrapper li.parent_menu.active a[aria-expanded=true]:active, #sidebar-wrapper li.parent_menu.active a[aria-expanded=true]:focus {
background: #e6e6e6 !important;
color: #414042 !important;
}
#sidebar-wrapper li.active > a:hover {
background: none;
text-decoration: none;
}
#sidebar-wrapper .parent_menu:hover {
background: #e6e6e6 !important;
text-decoration: none !important;
}
#sidebar-wrapper .parent_menu.active > a {
background: #e6e6e6;
color: #414042;
font-family: opensans-semibold;
}
#sidebar-wrapper ul .active {
background: #217589;
color: #e2e2e2;
}
#sidebar-wrapper ul .active:active {
background: #217589;
color: #e2e2e2;
}
.sidebar-wrapper {
z-index: 90;
}
#sidebar-wrapper.collapsed {
left: 250px;
-webkit-transition: left 0.3s, -webkit-transform 2s;
transition: left 0.3s, transform 2s;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="content-wrapper menu_visible">
<div class="grey_background"></div>
<div id="sidebar-wrapper">
<ul class="nav sidebar-nav" id="accordion" role="tablist" aria-multiselectable="false">
<li class=" active">
<a class="parent_menu_a" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseproduct" aria-expanded="true" aria-controls="collapseproduct"> <i class="fa fa-circle"></i>A<i class="fa fa-caret-right"></i> </a>
<ul aria-labelledby="headingproduct" role="tabpanel" class="panel-collapse collapse in" id="collapseproduct" aria-expanded="true" style="">
<li class=""><a href="add_new_product.html">Add new products</a></li>
<li class="active"><a href="products_check_inventory.html">Check inventory</a></li>
<li class=""><a href="products_channel_wise_mapping.html">Channel-wise mapping</a></li>
<li class=""><a href="products_search_for_items.html">Search for items</a></li>
</ul>
</li>
<li class="">
<a class="parent_menu_a" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseorder" aria-expanded="false" aria-controls="collapseorder"> <i class="fa fa-circle"></i> B <i class="fa fa-caret-right"></i> </a>
<ul aria-labelledby="headingorder" role="tabpanel" class="panel-collapse collapse" id="collapseorder" aria-expanded="false" style="">
<li class=""><a href="create_recall_requests.html">Create recall request</a></li>
<li class=""><a href="">Manage orders</a></li>
</ul>
</li>
<li class="">
<a class="parent_menu_a" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapsebilling" aria-expanded="false" aria-controls="collapsebilling"> <i class="fa fa-circle"></i>C <i class="fa fa-caret-right"></i> </a>
<ul aria-labelledby="headingbilling" role="tabpanel" class="panel-collapse collapse" id="collapsebilling" aria-expanded="false" style="">
<li class=""><a href="invoice.html">Invoice</a></li>
<li class=""><a href="pricing.html">Pricing</a></li>
</ul>
</li>
</ul>
</div>
<div class="content-area">
<div class="container-fluid">
<div style="width:40%;margin:0 auto;padding:40px;height:400px;text-align:center;background-color:black;color:red;vertical-align:middle;font-size:23px;">
Testing
</div>
</div>
</div>
<br>
<br>
<br>
</div>