Verschachtelte SideBar mit oder ohne Twitter Bootstrap

Ist es möglich, erstellen Sie Verschachtelte Links die Sidebar mit twitter bootstrap?
Ich schaute mir Ihre tutorials, aber konnte es nicht finden.
Ich möchte eine Seitenleiste mit einigen Listen und jede Liste enthält geschachtelte Listen, die standardmäßig ausgeblendet sind und wenn der Benutzer den Mauszeiger auf der Liste der versteckten Optionen sollten sichtbar werden.

<div class="span2">  
    <div class="well sidebar-nav">  
        <ul class="nav nav-list">  
            <li class="nav-header">Categories</li>  
            <li class="divider"></li>
            <li><a href="#">Books</a> 
                              <ul>
                                  <li><a href="#">Science Books</a></li>
                                  <li><a href="#">Computer Books</a></li>
                                  <li><a href="#">History Books</a></li>
                               </ul>
                            </li>  
            <li><a href="#">Electronics</a></li> 
                                <ul>
                                  <li><a href="#">TV</a></li>
                                  <li><a href="#">Freezer</a></li>
                                  <li><a href="#">Radio</a></li>
                                </ul> 
            <li><a href="#">Computer</a></li>
        </ul>  
    </div> 
</div>

Ist es möglich, es zu tun mit twitter bootstarp ? Wenn Sie keine andere Lösung??

Dank

Zuklappen können Sie mischen Zusammenbruch plugin mit gut+nav Klassen. Kleines Beispiel
Acauan es funktioniert onclick und zeigen die verborgenen Inhalte unten. Ich brauche zum ändern der js dann?
jsfiddle.net/zzJ4w/5 PS. Ich weiß nicht, warum dieses javascript im fiddle nicht funktioniert, aber in meiner Umwelt entwickeln, funktioniert einwandfrei.
Acauan Ihr auch nicht mit mir zu arbeiten 🙁
öffnen Sie diese Seite fiddle.jshell.net/zzJ4w/5/show und versuchen Sie es ausführen, javascript(ohne $(document).ready()) via firebug

InformationsquelleAutor Zoha Ali Khan | 2012-06-20

7

Zusammenbruch Können Sie mischen Zusammenbruch plugin mit gut+nav Klassen. Exemple

Broken links zu externen Dateien. Aktualisiert: jsfiddle.net/cYXzT

InformationsquelleAutor Oswaldo Acauan

ja, Sie können dies tun, finden Sie unter dem angegebenen link unten

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
            <a class="brand" href="#">Brand X</a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li><a href="#">Regular Link</a></li>                    
                    <li class="dropdown">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">Basic List <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Lorem</a></li>
                            <li><a href="#">Ipsum</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Nested Lists<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="nav-header">Top Stuff</li>
                            <li class="nav nav-list">Nested List<b class="caret"></b>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Foo</a></li>
                                    <li><a href="#">Bar</a></li>    
                                    <li><a href="#">Bat</a></li>                                
                                </ul>        
                            </li>
                            <li class="nav nav-list">Nested List<b class="caret"></b>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Foo</a></li>
                                    <li><a href="#">Bar</a></li>    
                                </ul>    
                            </li>
                            <li><a href="#">Sit</a></li>
                            <li><a href="#">Amet</a></li>
                            <li><a href="#">Dolor</a></li>
                            <li class="divider"></li>
                            <li class="nav-header">Other Stuff</li>
                            <li><a href="#">Foo</a></li>
                            <li><a href="#">Bar</a></li>
                            <li><a href="#">Bat</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
</div>

.nav li.dropdown ul.dropdown-menu li.nav-list:hover {
    background: #08c;
    color: #fff;
    cursor: pointer;    
}

.nav li.dropdown ul.dropdown-menu .nav-list {
    font-size: 13px;
    color: #333;
    float: none;
    line-height: 21px;
}

.nav li.dropdown ul.dropdown-menu li:hover ul {
    display:block;
    position:absolute;
    left:100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.nav li.dropdown ul.dropdown-menu ul {
    display: none;
    float:right;
    position: relative;
    top: auto;
    margin-top: -27px;
}

.nav li.dropdown ul.dropdown-menu .nav-list .caret {
    border-bottom-color: #999;
    border-top-color: #999;
    float: right;
}

.nav li.dropdown ul.dropdown-menu .nav-list:hover .caret {
    margin-left: 6px;
    margin-top: 5px;
    margin-right: 1px;
    border-right: 0;
    border-left: 4px solid #fff;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.nav li.dropdown ul .nav-list .dropdown-menu:after {
    top: 8px;
    left: -12px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #fff;
}

.nav li.dropdown ul .nav-list .dropdown-menu:before {
    left: -7px;
    border-left: 0;
    top: 7px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid rgba(0,0,0,0.05);
}