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

Popular posts from this blog

python - Operations inside variables -

Generic Map Parameter java -

arrays - What causes a java.lang.ArrayIndexOutOfBoundsException and how do I prevent it? -