手风琴内部的bootstrap选项卡

我正在使用手风琴内的选项卡创建类别菜单。当用户点击一个类别时，他会得到子类别列表，当他们点击子类别时，他们会获得所有产品的列表。我设法写jQuery的，但我在控制台收到错误： Uncaught TypeError: Cannot read property 'tab' of undefined手风琴内部的bootstrap选项卡

<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

来源

2016-06-11 Liad Idan

哪一部分你的HTML的是 “标签”？正如你现在已经解释过的那样，你不清楚你想要做什么。 – Jonathan

里面的li.list-group-item，我试图解决这个控制台错误。一切正常，如我所料 –

对，我看到'.tab（）'是bootstrap的一部分。 – Jonathan

$('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)两次$(this).addClass('active');

从彼得的解决方案使用$(e.target)是，虽然，因为它得到直接引发事件的元素更好。

来源

2016-06-11 14:07:40 Jonathan

我在.tab（'show'）之前添加了$（'a'，this），现在它工作时没有错误。此外，您的解决方案运行良好。 TNX（; –

试试下面的例子

$('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

来源

2016-06-11 14:21:04

手风琴内部的bootstrap选项卡

回答

相关问题