jquery - bootstrap 3 侧边栏停用子项

Question

我正在尝试制作一个不会折叠的侧边栏导航，并将选项卡区域更改为右侧。我提供了一个指向 jsfiddle 的链接，这是我目前拥有的，问题是当您单击一个子项时，父项不会停用，如果您单击一个父项，它会激活所有子项。此行为会阻止重新激活父项，直到选择了不同的第二个父项。然而，即使您这样做，第一个父项的子项之一仍处于激活状态。

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

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) 具有该样式时，您可以使用直接子项选择器 > :

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/