手風琴內部的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選項卡

回答

相關問題