Ботинок ботстрапа Расширение подкатегорий

Question

Использование this as a my starting template. Я пытаюсь интегрировать способ начальной загрузки расширения подкатегорий, как показано на боковой панели getting started page of getbootstrap.

Однако у меня проблема, когда я прокручиваю страницу, и если я попаду в категорию или ее подкатегорию, она выделяет все части категории на боковой панели (а не только подкатегории).

Вот отрывок из моей боковой панели HTML:

<div class="col-md-3" id="leftCol"> 
<ul class="nav nav-stacked" id="sidebar"> 
    <li class="active"> 
     <a>User Guide</a> 
     <ul class="nav"> 
      <li> 
       <a href="#intro">Introduction</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#search">Searching</a> 
     <ul class="nav"> 
      <li> 
       <a href="#searchresults">Search Results</a> 
       <a href="#understandingsearch">Understanding Search Results</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#profile">User Profile</a> 
     <ul class="nav"> 
      <li> 
       <a href="#viewprofile">Viewing a Profile</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#eventgraph">Event Graph</a> 
     <ul class="nav"> 
      <li> 
       <a href="#graphdisplay">Graph Display</a> 
       <a href="#graphinteraction">Graph Interaction</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#infopanel">Information Panel</a> 
     <ul class="nav"> 
      <li> 
       <a href="#paneldisplay">Panel Display</a> 
      </li> 
     </ul> 
    </li> 
</ul> 
</div> 

и CSS:

body { 
    padding-top:50px; 
} 

#masthead { 
    min-height:250px; 
} 

#masthead h1 { 
    font-size: 30px; 
    line-height: 1; 
    padding-top:20px; 
} 

#masthead .well { 
    margin-top:8%; 
} 

@media screen and (min-width: 768px) { 
    #masthead h1 { 
     font-size: 50px; 
    } 
} 

.navbar-bright { 
    background-color:#111155; 
    color:#fff; 
} 

.affix-top,.affix{ 
    position: static; 
} 

@media (min-width: 979px) { 
    #sidebar.affix-top { 
     position: static; 
     margin-top:30px; 
     width:228px; 
    } 

    #sidebar.affix { 
     position: fixed; 
     top:70px; 
     width:228px; 
    } 
} 

#sidebar li.active { 
    font-weight: bold; 
    border:0 #CC0000 solid; 
    border-right-width:5px; 
} 

/* Nav: second level */ 
#sidebar .nav { 
    display: none; 
} 

#sidebar > li.active .nav { 
    display: block; 
} 

#sidebar .nav { 
    margin-bottom: 8px; 
} 

#sidebar .nav > li > a { 
    padding-top: 3px; 
    padding-bottom: 3px; 
    padding-left: 30px; 
    font-size: 90%; 
} 

Я также включил JSFiddle, чтобы показать, что я вижу: http://jsfiddle.net/HsZ9q/8/

Пожалуйста обратите внимание: в JSFiddle вам нужно увеличить окно до максимально возможного, пока вы не увидите боковую панель из-за отзывчивости.

Answer 1

Я думаю, что ваш css добавляет границу в элемент <li>, когда он: активный, вы должны сделать это с элементом <a>. Также в подменю каждый элемент должен быть на <li>

Надежда помогает

http://jsfiddle.net/HsZ9q/12/

#sidebar li.active > a{ 
    font-weight: bold; 
    border:0 #CC0000 solid; 
    border-right-width:5px; 
} 

<!--left--> 
<div class="col-md-3" id="leftCol"> 
    <ul class="nav nav-stacked" id="sidebar"> 
     <li class="active"> 
      <a>User Guide</a> 
      <ul class="nav"> 
       <li> 
        <a href="#intro">Introduction</a> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="#search">Searching</a> 
      <ul class="nav"> 
       <li> 
        <a href="#searchresults">Search Results</a> 
       </li> 
       <li> 
        <a href="#understandingsearch">Understanding Search Results</a> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="#profile">User Profile</a> 
      <ul class="nav"> 
       <li> 
        <a href="#viewprofile">Viewing a Profile</a> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="#eventgraph">Event Graph</a> 
      <ul class="nav"> 
       <li> 
        <a href="#graphdisplay">Graph Display</a> 
       </li> 
       <li> 
        <a href="#graphinteraction">Graph Interaction</a> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="#infopanel">Information Panel</a> 
      <ul class="nav"> 
       <li> 
        <a href="#paneldisplay">Panel Display</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div><!--/left-->