Многоуровневая вкладка Панель с Bootstrap - добавление класса .active 2 first-subpanel

Question

Я делаю многоуровневую страницу панели на основе Bootstrap. Структура прекрасна, но я хотел бы, чтобы суб-панели были активны только тогда, когда активна панель родителя.

Мой код выглядит следующим образом:

<!-- NAV TABS N1--> 
      <div class="row"> 
       <div class="col......."> 
        <ul class="nav nav-tabs"> 
        <li class="active"><a href="#1A" data-toggle="tab">A</a></li> 
        <li><a href="#1B" data-toggle="tab">B</a></li> 
        </ul> 
       </div> 
      </div> 
<!-- /.NAV TABS N1--> 

<!-- CONTENT N1 --> 
<div class="tab-content"> 

    <!-- TAB CONTENT N1A --> 
    <div class="tab-pane fade active in" id="1A"> 
    <div class="row"> 
     <div class="col...."> 

     <!-- NAV TABS N2 --> 
     <div class="row"> 
      <div class="col......."> 
       <ul class="nav nav-tabs"> 
       <li class="active"><a href="#1Aa" data-toggle="tab">A1</a></li> 
       <li><a href="#1Ab" data-toggle="tab">A2</a></li> 
       </ul> 
      </div> 
     </div> 
     <!-- /.NAV TABS N2 --> 

     <!-- CONTENT N2 --> 
     <div class="tab-content"> 
      <!-- TAB CONTENT N21 --> 
      <div class="tab-pane fade active in" id="1Aa"> 
       <h1>A1</h1> 
       <p>......</p> 
      </div> 
      <!-- TAB CONTENT N21 --> 
      <div class="tab-pane fade" id="1Ab"> 
       <h1>A2</h1> 
       <p>......</p> 
      </div> 
     </div> 
     <!-- ./CONTENT N2 --> 

    </div> 
    </div> 
    <!-- /.TAB CONTENT N1A --> 

    <!-- TAB CONTENT N1B --> 
    <div class="tab-pane fade" id="1B"> 
    <div class="row"> 
     <div class="col...."> 

     <!-- NAV TABS N2 --> 
     <div class="row"> 
      <div class="col......."> 
       <ul class="nav nav-tabs"> 
       <li class="active"><a href="#1Ba" data-toggle="tab">A1</a></li> 
       <li><a href="#1Bb" data-toggle="tab">A2</a></li> 
       </ul> 
      </div> 
     </div> 
     <!-- /.NAV TABS N2 --> 

     <!-- CONTENT N2 --> 
     <div class="tab-content"> 
      <!-- TAB CONTENT N21 --> 
      <div class="tab-pane fade" id="1Ba"> 
       <h1>A1</h1> 
       <p>......</p> 
      </div> 
      <!-- TAB CONTENT N21 --> 
      <div class="tab-pane fade" id="1Bb"> 
       <h1>A2</h1> 
       <p>......</p> 
      </div> 
     </div> 
     <!-- ./CONTENT N2 --> 

    </div> 
    </div> 
    <!-- /.TAB CONTENT N1B --> 

</div> 
<!-- ./CONTENT N1 --> 

Я хотел бы, чтобы вызвать первый суб-панель, когда родительские панели становятся активными, после нажатия на нее. Так он пытался этот кусок JQuery, но я не так хорош в этом, так что не работает:

$("#1B").click(function() { 
      ("#1Ba").addClass('in active'); 
      }); 

Любая идея?

Answer 1

У меня есть что-то в этом роде, возможно, может вам помочь. Если вы по-прежнему необходимо, конечно, хехе

function getRootChild(element, childs) { 
 
    childs.push(element); 
 
    if (element.next('li.child').length > 0) { 
 
     getRootChild(element.next('li.child'), childs); 
 
    } 
 
} 
 

 
$("li.list-group-item.root").on('click', function() { 
 
    var childs = []; 
 

 
    getRootChild($(this).next('li.child'), childs); 
 

 
    for(idx in childs) { 
 
     $(childs[idx]).slideToggle(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<li class="list-group-item root"> 
 
    <a href="#"> 
 
    Root item 
 
    </a> 
 
</li> 
 
<li class="list-group-item child" style="display: none;"> 
 
    <a href="#"> 
 
    child 1 
 
    </a> 
 
</li> 
 
<li class="list-group-item child" style="display: none;"> 
 
    <a href="#"> 
 
    child 2 
 
    </a> 
 
</li>