Trigger вложенных вкладки панель на Bootstrap 3

Question

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

Я вложенные две вкладки панели, чтобы иметь возможность управляйте большим количеством информации в небольшом пространстве (это очень длинный закон, и мне нужно четко показать его статьи)

Первые вкладки разделяют основные разделы, вложенные показы в маленьких кусках статей.

Он отлично работает в основном контейнере.

Но мне нужно дерево навигации на боковой панели, и я не могу запустить вкладку вложенной панели, если родительский не включен.

Я думаю, что это может быть, чтобы добавить Возможным некоторые JQuery, чтобы вызвать вкладку родительской при нажатии на прямую ссылку на вложенную один, но я не понимаю ... :(

Это код (мои apoligies, я вижу, это слишком долго):

<!-- Sidebar --> 
<div class="bs-sidebar" role="complementary"> 
<ul id="test"> 
    <li><a href="#test_1" data-toggle="tab">Title I</a> 
    <ul> 
     <li><a href="#test_11" data-toggle="tab">Sub_Title I</a></li> 
     <li><a href="#test_12" data-toggle="tab">Sub_Title II</a></li> 
    </ul> 
    </li> 
    <li><a href="#test_2" data-toggle="tab">Title II</a></li> 
    <!-- ... --> 
</ul>   
</div> 

<!-- main container --> 
<div role="main"> 
<h2>Some Title</h2> 
<div class="bs-example bs-example-tabs"> 
    <div class="panel panel-default"> 
     <div class="collapse navbar-collapse navbar-ex1-collapse"> 
     <ul id="tabs" class="nav nav-tabs"> 
      <li><a href="#test_1" data-toggle="tab">Title I</a></li> 
      <li><a href="#test_2" data-toggle="tab">Title II</a></li> 
      <!-- ... --> 
     </ul> 
     </div>   

<div class="panel-body parent"> 
    <div id="tabs_parent" class="tab-content"> 
    <div id="test_0" class="tab-pane active fade in"> 
     <p>Instructions</p> 
    </div> 
    <div id="test_1" class="tab-pane fade"> 
     <ul> 
     <li><a href="#test_11" data-toggle="tab">Sub_Title I</a></li> 
     <li><a href="#test_12" data-toggle="tab">Sub_Title II</a></li> 
     </ul> 

     <div id="tabs_children" class="tab-content"> 
     <div id="test_11" class="tab-pane fade"> 
      <p>Sub-I Lorem ipsum dolor sit amet...</p> 
     </div> 
     <div id="test_12" class="tab-pane fade"> 
      <p>SubII - Morbi lectus nibh...</p> 
     </div> 

     </div> 
    </div> 

    <div id="test_2" class="tab-pane fade"> 
     <p>Morbi lectus nibh...</p> 
    </div> 
     <!-- ... --> 

Answer 1

Я проверял еще раз добавить JQuery код, чтобы сделать это вызвать

Во-первых,

Добавить идентификатор для некоторых элементов:

<li><a href="#test_11" id="id_test_11" data-toggle="tab">Sub_Title I</a></li> 
<li><a href="#test_12" id="id_test_12" data-toggle="tab">Sub_Title II</a></li> 

и

<li><a href="#test_1" id="id_test_1" data-toggle="tab">Title I</a></li> 
<li><a href="#test_2" id="id_test_2" data-toggle="tab">Title II</a></li> 

После, добавьте этот яваскрипт кода:

$('#id_test_11').on('click',function(e){ 
    $('#id_test_1').click() 
});