html – Twitter Bootstrap多个手风琴,但一次只有一个开放式面板

概述我的页面上有3个Twitter Bootstrap手风琴,每个都设置如下： <div class="panel-group" id="accordion1"> <div class="panel panel-default"> <div class="panel-heading accordion-toggle collapsed" data-toggle="collaps 我的页面上有3个Twitter bootstrap手风琴,每个都设置如下：

<div  ID="accordion1">    <div >        <div  data-toggle="collapse" data-parent="#accordion1" data-target="#collapSEOne1">             <h4 >Collapsible Group Item #1</h4>        </div>        <div ID="collapSEOne1" >            <div >...</div>        </div>    </div>    <div >        <div  data-toggle="collapse" data-parent="#accordion1" data-target="#collapseTwo1">             <h4 >Collapsible Group Item #2</h4>        </div>        <div ID="collapseTwo1" >            <div >...</div>        </div>    </div>    <div >        <div  data-toggle="collapse" data-parent="#accordion1" data-target="#collapseThree1">             <h4 >Collapsible Group Item #3</h4>        </div>        <div ID="collapseThree1" >            <div >...</div>        </div>    </div></div>

手风琴的ID就像上面显示的那样,所以#accordion1,#accordion2和#accordion3.每个手风琴的面板数量相同.

如何更改此设置,以便一次只能打开一个面板？目前,每个手风琴一个面板可以一次打开,这不是我想要的行为.

演示：JSFiddle

解决方法 尝试这个：

<div  ID="accordion1">    <div >        <div  data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapSEOne1">             <h4 >Collapsible Group Item #1</h4>        </div>        <div ID="collapSEOne1" >            <div >Anim pariatur cliche reprehenderit,enim eiusmod high life accusamus terry richardson ad squID. 3 wolf moon officia aute,non cupIDatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,sunt aliqua put a bird on it squID single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,craft beer labore wes anderson cred nesciunt sAPIente ea proIDent. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>        </div>    </div>    <div >        <div  data-toggle="collapse" data-parent="#accordion1,#accordion3" data-target="#collapseTwo1">             <h4 >Collapsible Group Item #2</h4>        </div>        <div ID="collapseTwo1" >            <div >Anim pariatur cliche reprehenderit,#accordion3" data-target="#collapseThree1">             <h4 >Collapsible Group Item #3</h4>        </div>        <div ID="collapseThree1" >            <div >Anim pariatur cliche reprehenderit,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>        </div>    </div></div><div  ID="accordion2">    <div >        <div  data-toggle="collapse" data-parent="#accordion1,#accordion3" data-target="#collapSEOne2">             <h4 >Collapsible Group Item #1</h4>        </div>        <div ID="collapSEOne2" >            <div >Anim pariatur cliche reprehenderit,#accordion3" data-target="#collapseTwo2">             <h4 >Collapsible Group Item #2</h4>        </div>        <div ID="collapseTwo2" >            <div >Anim pariatur cliche reprehenderit,#accordion3" data-target="#collapseThree2">             <h4 >Collapsible Group Item #3</h4>        </div>        <div ID="collapseThree2" >            <div >Anim pariatur cliche reprehenderit,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>        </div>    </div></div><div  ID="accordion3">    <div >        <div  data-toggle="collapse" data-parent="#accordion1,#accordion3" data-target="#collapSEOne3">             <h4 >Collapsible Group Item #1</h4>        </div>        <div ID="collapSEOne3" >            <div >Anim pariatur cliche reprehenderit,#accordion3" data-target="#collapseTwo3">             <h4 >Collapsible Group Item #2</h4>        </div>        <div ID="collapseTwo3" >            <div >Anim pariatur cliche reprehenderit,#accordion3" data-target="#collapseThree3">             <h4 >Collapsible Group Item #3</h4>        </div>        <div ID="collapseThree3" >            <div >Anim pariatur cliche reprehenderit,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>        </div>    </div></div>

总结

以上是内存溢出为你收集整理的html – Twitter Bootstrap多个手风琴,但一次只有一个开放式面板全部内容，希望文章能够帮你解决html – Twitter Bootstrap多个手风琴,但一次只有一个开放式面板所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。