html - bootrstrap side menu three levels collapsing -
i'm using sb admin bootstrap theme , have problems collapsing left side menu correctly.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="navbar-default sidebar" role="navigation"> <div class="sidebar-nav nav-collapse"> <ul class="nav" id="side-menu"> <li> <a href="#"><i class="fa fa-cog fa-fw"></i> top level 1 (this 1 collapses correctly)<span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li> second level 1</li> <li> second level 2</li> </ul> </li> <li> <a href="#"><i class="fa fa-cog fa-fw"></i> top level 2 (this 1 stays open)<span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li> <a href="#"><i class="fa fa-plus fa-fw"></i> second level 1<span class="fa arrow"></span></a> <ul class="nav nav-third-level collapse"> <li>third level 1</li> <li>third level 2</li> </ul> </li> <li> <a href="#"><i class="fa fa-plus fa-fw"></i> second level 2<span class="fa arrow"></span></a> <ul class="nav nav-third-level collapse"> <li>third level 1</li> <li>third level 2</li> </ul> </li> </ul> </li> <li> <a href="#"><i class="fa fa-cog fa-fw"></i> top level 3 (this 1 stays open)<span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li> <a href="#"><i class="fa fa-plus fa-fw"></i> second level 1<span class="fa arrow"></span></a> <ul class="nav nav-third-level collapse"> <li>third level 1</li> <li>third level 2</li> </ul> </li> <li> <a href="#"><i class="fa fa-plus fa-fw"></i> second level 2<span class="fa arrow"></span></a> <ul class="nav nav-third-level collapse"> <li>third level 1</li> <li>third level 2</li> </ul> </li> </ul> </li> </ul> </div> </div> what want acheive when first load page menu should collapsed. when select subitem want menu load collapsed , open correct item. top menu item 1 sublevel collapses correctly. second , third top level first collapse (which ok) open (should stay closed unless subitem selected). third level works ok. correct combination of bootstrap collapse classes acheive correct function?
Comments
Post a Comment