Bootstrap 的多级选项卡面板 - 添加 class .active 2 第一个子面板

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>

Bootstrap 的多级选项卡面板 - 添加 class .active 2 第一个子面板

Multi-level tab Panel with Bootstrap - adding class .active 2 first-subpanel

jquery

twitter-bootstrap-3

click

addclass

tabpanel