Bootstrap accordion with navigation bar to implement the common menu bar

Effect

HTML code

    <Divclass= "sidebar">        <Divclass= "Mc-search">            <Divclass= "Input-group">                <inputtype= "text"class= "Form-control"placeholder= "Search ...">            <spanclass= "Input-group-btn">                <Buttontype= "button"class= "Btn Btn-default"><Iclass= "fa Fa-search"></I></Button>            </span>            </Div>        </Div>        <Divclass= "NavBar Navbar-default"ID= "Mycollapse">            <!--<ul class= "nav navbar-nav nav-pills nav-stacked" > -            <ulclass= "Nav nav-pills nav-stacked">                <Li><ahref="#"><Iclass= "fa fa-dashboard fa-fw"></I>Dashbord</a></Li>                <Li>                    <ahref= "#second-level-1"class= "Second-level accordion-toggle"Data-toggle= "Collapse"data-parent= "#mycollapse">                        <Iclass= "fa fa-table fa-fw"></I>Table<Iclass= "fa fa-angle-left pull-right"></I>                    </a>                    <ulclass= "nav collapse"ID= "Second-level-1">                        <Li><ahref="#">Database testing</a></Li>                        <Li><ahref="#">Database testing</a></Li>                        <Li><ahref="#">Database testing</a></Li>                    </ul>                </Li>                <Li><ahref="#"><Iclass= "fa fa-bar-chart fa-fw"></I>Chart</a></Li>                <Li><ahref="#"><Iclass= "fa fa-edit fa-fw"></I>Form</a></Li>                <Li>                    <ahref= "#second-level-2"class= "Second-level accordion-toggle"Data-toggle= "Collapse"data-parent= "#mycollapse">                        <Iclass= "fa fa-table fa-fw"></I>Table<Iclass= "fa fa-angle-left pull-right"></I>                    </a>                    <ulclass= "nav collapse"ID= "Second-level-2">                        <Li><ahref="#">Database testing</a></Li>                        <Li><ahref="#">Database testing</a></Li>                        <Li><ahref="#">Database testing</a></Li>                    </ul>                </Li>                <Li><ahref="#"><Iclass= "fa fa-wrench fa-fw"></I>UI Element</a></Li>                <Li>                    <ahref= "#second-level-3"class= "Second-level accordion-toggle"Data-toggle= "Collapse"data-parent= "#mycollapse">                        <Iclass= "fa fa-table fa-fw"></I>Table<Iclass= "fa fa-angle-left pull-right"></I>                    </a>                    <ulclass= "nav collapse"ID= "Second-level-3">                        <Li><ahref="#">Database testing</a></Li>                        <Li><ahref="#">Database testing</a></Li>                        <Li><ahref="#">Database testing</a></Li>                    </ul>                </Li>            </ul>        </Div>    </Div>

JS Code

$(function() {$ (document). On (' Click ', '. Accordion-toggle ',function(event) {event.stoppropagation (); var$ This= $( This); varParent = $ This. Data (' Parent '); varActives = Parent && $ (parent). Find ('. collapse.in ')); //From Bootstrap itself        if(Actives &&actives.length) {actives.data (' Collapse ');Actives.collapse (' Hide '); }        vartarget = $ This. attr (' data-target ') | | (href = $ This. attr (' href ')) && href.replace (/.* (? =#[^\s]+$)/, ");//Strip for IE7$ (target). Collapse (' Toggle '); });})

Effect

1. Click on one to expand the drop-down menu.
2. Click another if there is a drop-down menu to automatically close the previous expand

Bootstrap accordion with navigation bar to implement the common menu bar