在左侧边栏中，我只想在活动模块中保持打开最近点击的模块

Question

在左侧边栏中，我只想在活动模块中保持打开点击模块的一部分，即在我当前的页面模块中，＃34; A＆＃34;处于活动状态，并且在加载页面后默认打开它。所以，目前当我点击其他模块时，他们也会打开。但我想要的是活动模块的一部分，只有最新的模块应该打开。例如A：活动并且当前打开，当我点击＆＃34; B＆＃34;模块将打开＆＃34; A＆＃34;。但是当我点击＆＃34; C＆＃34;模块模块＆＃34; B＆＃34;点击后应该关闭。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 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>