带有或不带有 Twitter Bootstrap 的嵌套侧边栏

Posted 2023-04-13

【中文标题】带有或不带有 Twitter Bootstrap 的嵌套侧边栏

【英文标题】：Nested SideBar with or without Twitter Bootstrap

【发布时间】：2012-06-22 21:08:06

【问题描述】：

是否可以使用 twitter bootstrap 创建嵌套的左侧边栏？ 我检查了他们的教程，但找不到。 我想用一些列表制作一个侧边栏，每个列表都包含嵌套列表，默认情况下这些列表是隐藏的，当用户将鼠标悬停在列表上时，隐藏的选项应该变得可见。

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

可以用 twitter bootstarp 来做吗？如果没有其他解决方案？

谢谢

【问题讨论】：

Collapse 您可以将折叠插件与 well+nav 类混合使用。 Little Exemple

@Oswaldo Acauan 它可以点击并显示下面的隐藏内容。那我需要换js吗？

jsfiddle.net/zzJ4w/5 PS。我不知道为什么小提琴中的这个 javascript 不起作用，但在我的开发环境中工作正常。

@Oswaldo Acauan 它也不适合我:(

打开这个页面fiddle.jshell.net/zzJ4w/5/show并尝试通过firebug执行javascript（没有$（document）.ready（））

【参考方案1】：

Collapse 您可以将折叠插件与 well+nav 类混合使用。 Exemple

【参考方案2】：

是的，您可以这样做，请参阅下面给出的链接

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

http://jsfiddle.net/scottloway/S9yTU/