我正在使用 Accordion 内的选项卡来制作类别菜单。
当用户单击一个类别时,他会获得子类别列表,当用户单击子类别时,他们会获得包含所有产品的列表。
我设法编写了 jQuery,但在控制台中出现错误:
未捕获类型错误:无法读取未定义的属性“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>
最佳答案
$('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)
更好,因为它获取直接触发事件的元素。
关于javascript - Accordion 内的 Bootstrap 选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37764368/