手风琴内的引导标签答案

【问题标题】：bootstrap tabs inside accordion手风琴内的引导标签
【发布时间】：2016-06-11 13:35:20
【问题描述】：

我正在使用手风琴内的选项卡来制作类别菜单。当用户点击一个类别时，他会得到子类别列表，当他们点击子类别时，他们会得到所有产品的列表。我设法编写了 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

【问题讨论】：

HTML 的哪一部分是“标签”？正如你现在所解释的那样，你并不是很清楚你想要做什么。
li.list-group-item 里面的a，我正在尝试解决这个控制台错误。一切都按我的预期进行
对，我知道.tab() 是引导程序的一部分。
请不要在您的问题中仅使用 Fiddle 链接。尝试在您的问题中添加代码 sn-ps。

标签： javascript jquery twitter-bootstrap

【解决方案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 子项中的引导标记标记为目标。

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

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

【讨论】：

我在 .tab('show') 之前添加了 $('a', this) ，现在它可以正常工作了。您的解决方案也运行良好。 TNX (;

【解决方案2】：

试试下面的例子

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

.badge {
  float: right;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<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>

更新Fiddle

【讨论】：