1
在左側邊欄我只是想保持打開點擊模塊的一部分從活動模塊，即在我當前的頁面模塊「A」是活動的，它是開放的在頁面加載後默認。所以，現在當我點擊其他模塊時，他們也會打開。但是我想要的是從主動模塊的一部分只有最新的模塊應該打開。例如A：當前激活並打開，當我點擊「B」模塊時，它將以「A」打開。但是，當我將點擊 「C」 模塊模塊 「B」 應clicking.`後得到關閉在左側邊欄我只想保持打開最近點擊的模塊從活動模塊的一部分
.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>
這是正是我想要的。萬分感謝。 – sanjay
不客氣。 –
投票的問題是否有幫助。謝謝 –