Question

我正在使用手风琴中的标签来制作类别菜单。当用户点击某个类别时，他会获得子类别列表，当他们点击子类别时，他们会获得包含所有产品的列表。我设法写了jQuery，但我在控制台中收到错误： Uncaught TypeError: Cannot read property 'tab' of undefined

<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');定位您点击的a的{{1}}子项中的引导标记标记。

我们可以在li上链接一些方法，只要在它之后链接的那些方法不返回新的东西。因此，我无需为$(this)

两次致电$(this)

使用Peter的解决方案中的$(this).addClass('active');更好，因为它获得了直接触发事件的元素。

Answer 2

尝试以下示例

[16:20:40] Local gulp not found in ~/Code/gulp
[16:20:40] Try running: npm install gulp

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

.badge {
  float: right;
}

更新了Fiddle

手风琴里面的bootstrap标签

2 个答案: