bootstrap 3 个边栏 de-activing 个子项

Question

我正在尝试制作一个不会折叠的侧边栏导航，并将标签区域更改为右侧。我已经向 jsfiddle 提供了一个 link，这是我目前拥有的，问题是当您单击 child 时，parent 项目不会停用，如果您单击parent 项激活所有 children 项。此行为会阻止重新激活 parent 项目，直到选择了不同的第二个 parent 项目。但是，即使您执行此操作，第一个 parent 的 children 项目之一仍处于激活状态。

任何人都知道如何使选择 child 节点不会激活 parent 节点，或者如何在单击节点时停用所有其他节点？那太棒了，谢谢！

JSFiddle Demo

Html:

<div class="container">
        <div class="col-sm-2">
            <nav class="nav-sidebar">
                <ul class="nav tabs">
                    <li class="active"><a href="#tab_airConditioning" data-toggle="tab">Air Conditioning</a>
                        <ul class="nav sub-nav tabs">
                            <li class=""><a href="#tab_Installation" data-toggle="tab">Installation</a></li>
                            <li class=""><a href="#tab_Maintenance" data-toggle="tab">Maintenance</a></li>
                            <li class=""><a href="#tab_Repair" data-toggle="tab">Repair</a></li>                               
                        </ul>
                    </li>                       

                    <li class=""><a href="#tab2" data-toggle="tab">Heating</a></li>
                    <li class=""><a href="#tab3" data-toggle="tab">Controls</a></li>                               
                </ul>
            </nav>              
        </div>
            <!-- tab content -->
        <div class="tab-content">
            <div class="tab-pane active text-style" id="tab_airConditioning">
                <h2>Air Conditioning</h2>
                <p>
                Random text for Air Conditioning dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
                </p>
                <hr>
                <img src="http://placehold.it/350x250" class="img-rounded pull-right">   
            </div>

            <div class="tab-pane text-style" id="tab_Installation">
                <h2>Installation</h2>
                <p>Dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
                </p>
                <hr>
                <img src="http://placehold.it/150x90" class="img-rounded pull-left">
            </div>

            <div class="tab-pane text-style" id="tab_Maintenance">
                <h2>Maintenance</h2>
                <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum 
                </p>
                <hr>
                <div class="col-xs-6 col-md-3">
                <img src="http://placehold.it/150x150" class="img-rounded pull-right">
                </div>
            </div>
            <div class="tab-pane text-style" id="tab_Repair">
                <h2>Repair</h2>
                <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum 
                </p>
                <hr>
                <div class="col-xs-6 col-md-3">
                <img src="http://placehold.it/150x150" class="img-rounded pull-right">
                </div>
            </div>

            <div class="tab-pane text-style" id="tab2">
                <h2>Heating</h2>
                <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum 
                </p>
                <hr>
                <div class="col-xs-6 col-md-3">
                <img src="http://placehold.it/150x150" class="img-rounded pull-right">
                </div>
            </div>
            <div class="tab-pane text-style" id="tab3">
                <h2>Controls</h2>
                <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum 
                </p>
                <hr>
                <div class="col-xs-6 col-md-3">
                <img src="http://placehold.it/150x150" class="img-rounded pull-right">
                </div>
            </div>
        </div>
    </div>

CSS:

.nav-sidebar { 
width: 100%;
    padding: 30px 0; 
    border-right: 1px solid #ddd;
 }
 .nav-sidebar a {
    color: #333;
    -webkit-transition: all 0.08s linear;
    -moz-transition: all 0.08s linear;
    -o-transition: all 0.08s linear;
    transition: all 0.08s linear;
 }
 .nav-sidebar .active a { 
     cursor: default;
     background-color: #0b56a8; 
     color: #fff; 
 }
 .nav-sidebar .active a:hover {
     background-color: #E50000;   
 }
 .nav-sidebar .text-overflow a,
 .nav-sidebar .text-overflow .media-body {
     white-space: nowrap;
     overflow: hidden;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis; 
 }
 .nav-sidebar .sub-nav a {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 30px;
    font-size: 12px;
    font-weight: 400;
 }

Answer 1

你目前的CSS：

 .nav-sidebar .active a { 
     cursor: default;
     background-color: #0b56a8; 
     color: #fff; 
 }
 .nav-sidebar .active a:hover {
     background-color: #E50000;   
 }

为 li.active a 下的所有子项提供样式，但是当您想要更具体并且只希望特定的 link (a) 具有该样式时，您可以使用直接子选择器 > :

http://www.sitepoint.com/web-foundations/child-selector-css-selector/

 .nav-sidebar .active > a { 
     cursor: default;
     background-color: #0b56a8; 
     color: #fff; 
 }
 .nav-sidebar .active > a:hover {
     background-color: #E50000;   
 }

演示：http://jsfiddle.net/hyp19nd5/1/

bootstrap 3 个边栏 de-activing 个子项

bootstrap 3 sidebar de-activing subitems

html

css

jquery

twitter-bootstrap