[英]Getting two Bootstrap Accordions to work within tabs
我在嘗試使兩個Bootstrap手風琴在同一頁面上的單獨選項卡中工作時遇到問題。
基本上,當我單擊第一個手風琴時,所有內容都會正常工作,並且內容會按預期折疊和擴展。
但是,當涉及到第二個手風琴時,單擊鏈接沒有任何影響,但是確實將css樣式應用於該元素。
我的問題是如何獲得它,以使兩個手風琴都按照手風琴#1的預期行為折疊和展開?
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<!-- ACCORDION NO.1 -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading edu1 active-state" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">HEADING 1</a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading edu1" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">HEADING 2</a></h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading edu1" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">HEADING 3</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
***** SOME OTHER CONTENT *****
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<!-- ACCORDION NO.2 -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading prev-emp activestate" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-2" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">HEADING 1</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="container panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading prev-emp" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">HEADING 2</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="container panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading prev-emp" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">HEADING 3</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="container panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
***** SOME OTHER CONTENT *****
</div>
</div>
</div>
這是我正在使用的jQuery;
$(function() {
$('.panel-heading').click(function() {
if ($(this).hasClass('activestate')) {
$(this).removeClass('activestate');
} else {
$('.panel-heading').removeClass('activestate');
$(this).addClass('activestate');
}
});
});
我在這里用選項卡1中的手風琴1和選項卡3中的手風琴2復制了我的問題: http : //jsfiddle.net/4yk7yzo9/1/
我是jQuery的no0b,因此請發揮出色,並感謝您向正確方向提供的任何指針
這個重復的ID是問題
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
***** SOME TEXT *****
</div>
</div>
您只是在為手風琴重復相同的ID。 而且,一些data-parents
混在一起, 這是您的更新小提琴
請參閱下面的第二手風琴的一些更改:
<div class="panel-group" id="accordion-2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading prev-emp activestate" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">HEADING 1</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="container panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading prev-emp" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">HEADING 2</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="container panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
<!-- Start of Previous Employment Tab #3 -->
<div class="panel panel-default">
<div class="panel-heading prev-emp" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">HEADING 3</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="container panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
</div>
您一次又一次地為每個標簽使用了相同的ID
。 這就是您的3個手風琴集都具有相似的id
屬性。
這是工作中的提琴,更新了您的提琴。 :) https://jsfiddle.net/Lq26j75z/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.