javascript - Accordion 内的 Bootstrap 选项卡

Question

我正在使用 Accordion 内的选项卡制作类别菜单。当用户点击一个类别时，他会得到子类别列表，当他们点击子类别时，他们会得到包含所有产品的列表。我设法编写了 jQuery，但在控制台中出现错误:未捕获的 TypeError:无法读取未定义的属性“tab”

<div class="container container-pad">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-3">
        <ul class="list-group category" role="tablist">
          <li class="list-group-item">
            <a role="button" data-toggle="collapse"  href="#collapseOne">
              categories 1
            </a>
          </li>
          <ul id="collapseOne" class="panel-collapse collapse">
            <li class="list-group-item" role="presentation">
              <a href="#category1" aria-controls="category1" role="tab" data-toggle="tab">category 1<span class="badge">1</span></a>
            </li>
            <li class="list-group-item" role="presentation">
              <a href="#category2" aria-controls="category2" role="tab" data-toggle="tab">category 2<span class="badge">2</span></a>
            </li>
          </ul>
          <li class="list-group-item">
            <a role="button" data-toggle="collapse"  href="#collapseTwo">
              categories 2
            </a>
          </li>
          <ul id="collapseTwo" class="panel-collapse collapse">
            <li class="list-group-item" role="presentation">
              <a href="#category3" aria-controls="category3" role="tab" data-toggle="tab">category 3<span class="badge">3</span></a>
            </li>
          </ul>
          <li class="list-group-item">
            <a role="button" data-toggle="collapse"  href="#collapseThree">
              categories 3
            </a>
          </li>
          <ul id="collapseThree" class="panel-collapse collapse">
            <li class="list-group-item" role="presentation">
              <a href="#category4" aria-controls="category4" role="tab" data-toggle="tab">category 4<span class="badge">4</span></a>
            </li>
            <li class="list-group-item" role="presentation">
              <a href="#category5" aria-controls="category5" role="tab" data-toggle="tab">category 5<span class="badge">5</span></a>
            </li>
          </ul>
        </ul>
      </div>
      <div class="col-md-9">
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane fade in active" id="category1">
            <ul class="list-group products">
             <li class="list-group-item">
               product 1
             </li>
            </ul>
          </div>
          <div role="tabpanel" class="tab-pane fade" id="category2">
            <ul class="list-group products">
              <li class="list-group-item">
                product 2
              </li>
              <li class="list-group-item">
               product 3
              </li>
            </ul>
          </div>
          <div role="tabpanel" class="tab-pane fade" id="category3">
            <ul class="list-group products">
              <li class="list-group-item">
                product 4
              </li>
              <li class="list-group-item">
               product 5
              </li>
              <li class="list-group-item">
                product 6
              </li>
            </ul>
          </div>
          <div role="tabpanel" class="tab-pane fade" id="category4">
            <ul class="list-group products">
              <li class="list-group-item">
                product 7
              </li>
              <li class="list-group-item">
                product 8
              </li>
              <li class="list-group-item">
                product 9
              </li>
              <li class="list-group-item">
                product 10
              </li>
            </ul>
          </div>
          <div role="tabpanel" class="tab-pane fade" id="category5">
            <ul class="list-group products">
              <li class="list-group-item">
                product 11
              </li>
              <li class="list-group-item">
                product 12
              </li>
              <li class="list-group-item">
                product 13
              </li>
              <li class="list-group-item">
                product 14
              </li>
               <li class="list-group-item">
                product 15
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>             


<script>
$('ul.panel-collapse li').click(function (e) { 
    $('ul li.active').removeClass('active');
    e.preventDefault()
            .tab('show');
    $(this).addClass('active');
});
</script>

JSFiddle

Answer 1

$('ul.panel-collapse li').click(function (e) {
    e.preventDefault();
    $('ul.panel-collapse li.active').removeClass('active');
    $(this).children().tab('show').addClass('active');
});

$('ul.panel-collapse li') 获取您的 .list-group-items。

$(this).children().tab('show'); 以您点击的 li< 的 a 子级中的 Bootstrap 标记标记为目标.

我们可以在 $(this) 上链接一些方法，只要那些链接在它之后的方法不返回新的东西。所以我不必为 $(this).addClass('active');

调用两次 $(this)

使用 Peter 解决方案中的 $(e.target) 更好，因为它直接获取触发事件的元素。