我正在尝试将药片和手风琴结合在bootstrap 3中。
它似乎工作文件，但我有两个问题。
bootply代码示例： here。
<div class="panel panel-default">
<div class="panel-heading">
<div data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<ul id="tabs" class="nav nav-pills" data-tabs="tabs">
<li><a href="#red" data-toggle="tab">Red</a></li>
<li class="active"><a href="#orange" data-toggle="tab">Orange</a></li>
<li><a href="#yellow" data-toggle="tab">Yellow</a></li>
<li><a href="#green" data-toggle="tab">Green</a></li>
<li><a href="#blue" data-toggle="tab">Blue</a></li>
</ul>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane active" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
</div>
</div>
CSS：
.panel-default {
border: 0px;
}
.panel {
border: 0px solid transparent; */
border-radius: 0px;
-webkit-box-shadow: 0 0 0;
box-shadow: 0;
}
答案 0 :(得分：2)
此解决方案可以重复用于页面中的多个面板。将data-collapse-toggle=" collapseOne"添加到ul。这里唯一的问题是：我还没有找到解决方案来删除“活跃”的问题。在标签上的状态，所以我使用了一个＆＃39;选择＆＃39;而是改为。欢迎任何想法，最好不要使用两个类。
完整工作Bootply：http://www.bootply.com/Nk0w3EuBxd
Javascript：
$('[data-collapse-toggle] li').click(function(){
var target = $('#' + $(this).parent().data('collapse-toggle'));
$(target).collapse({'toggle' : false }); //Fixes first time toggle error
if ( $(this).hasClass('selected') ){
$(this).removeClass('selected');
$(target).collapse('hide');
} else {
$(this).addClass('selected').siblings('li').removeClass('selected');
$(target).collapse('show');
}
});
答案 1 :(得分：1)
您可以使用javascript。
http://www.bootply.com/jsIK8OjCBK
JS：
$(function(){
var p1 = $('#collapseOne .panel-collapse');
var p2 =$('#collapseTwo .panel-collapse')
$(p1).collapse({toggle: false});
$(p2).collapse({toggle: false});
$("#collapseOne .panel-heading ul li a").click(function(){
$(p1).collapse('show');
$(p2).collapse('hide');
$("#collapseTwo .nav .active").removeClass('active');
});
$("#collapseTwo .panel-heading ul li a").click(function(){
$(p2).collapse('show');
$(p1).collapse('hide');
$("#collapseOne .nav .active").removeClass('active');
});
});
HTML：
<div id="collapseOne" class="panel panel-default">
<div class="panel-heading">
<div data-parent="#accordion">
<ul id="tabs" class="nav nav-pills" data-tabs="tabs">
<li><a href="#red" data-toggle="tab">Red</a></li>
<li class="active"><a href="#orange" data-toggle="tab">Orange</a></li>
<li><a href="#yellow" data-toggle="tab">Yellow</a></li>
<li><a href="#green" data-toggle="tab">Green</a></li>
<li><a href="#blue" data-toggle="tab">Blue</a></li>
</ul>
</div>
</div>
<div class="panel-collapse collapse in">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane active" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
</div>
</div>
<div id="collapseTwo" class="panel panel-default">
<div class="panel-heading">
<div data-parent="#accordion">
<ul id="tabs" class="nav nav-pills" data-tabs="tabs">
<li><a href="#One" data-toggle="tab">One</a></li>
<li><a href="#To" data-toggle="tab">To</a></li>
<li><a href="#Three" data-toggle="tab">Three</a></li>
<li><a href="#Four" data-toggle="tab">Four</a></li>
</ul>
</div>
</div>
<div class="panel-collapse collapse">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="One">
<h1>One</h1>
<p>One One One One One One</p>
</div>
<div class="tab-pane active" id="To">
<h1>To</h1>
<p>To To To To To</p>
</div>
<div class="tab-pane" id="Three">
<h1>Three</h1>
<p>Three Three Three Three Three</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="Four">
<h1>Four</h1>
<p>Four Four Four Four Four</p>
</div>
</div>
</div>
</div>
</div>
</div>
答案 2 :(得分：1)
据我所知，你只想在点击活动标签时切换手风琴。 你可以使用javascript使用折叠。请找到工作的jsfiddle Here
$('#accordion .panel-heading ul#tabs li a').click(function(){
$("#accordion .panel-heading ul#tabsb li").removeClass('active');
if ($(this).parent('li').hasClass('active'))
{ $('#collapseOne').collapse('toggle'); }
else
{
$('#collapseOne').collapse({toggle:false});
$('#collapseOne').collapse('show');
}
});
$("#accordion .panel-heading ul#tabsb li a").click(function(){
$("#accordion .panel-heading ul#tabs li").removeClass('active');
if ($(this).parent('li').hasClass('active'))
{ $('#collapseTwo').collapse('toggle'); }
else
{
$('#collapseTwo').collapse('show');
}
});
进行以下更改：
- 您正在使用两个具有相同ID标签的ul，将第二个ul的ID更改为tabsb
- 部分
触发崩溃href="#collapseOne"到href=""因为我们将使用js- 部分
href="#collapseTwo"至href=""
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<div data-toggle="collapse" data-parent="#accordion" href="">
<ul id="tabs" class="nav nav-pills" data-tabs="tabs">
<li><a href="#red" data-toggle="tab">Red</a></li>
<li class="active"><a href="#orange" data-toggle="tab">Orange</a></li>
<li><a href="#yellow" data-toggle="tab">Yellow</a></li>
<li><a href="#green" data-toggle="tab">Green</a></li>
<li><a href="#blue" data-toggle="tab">Blue</a></li>
</ul>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane active" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div data-toggle="collapse" data-parent="#accordion" href="">
<ul id="tabsb" class="nav nav-pills" data-tabs="tabs">
<li><a href="#One" data-toggle="tab">One</a></li>
<li><a href="#To" data-toggle="tab">To</a></li>
<li><a href="#Three" data-toggle="tab">Three</a></li>
<li><a href="#Four" data-toggle="tab">Four</a></li>
</ul>
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="One">
<h1>One</h1>
<p>One One One One One One</p>
</div>
<div class="tab-pane active" id="To">
<h1>To</h1>
<p>To To To To To</p>
</div>
<div class="tab-pane" id="Three">
<h1>Three</h1>
<p>Three Three Three Three Three</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="Four">
<h1>Four</h1>
<p>Four Four Four Four Four</p>
</div>
</div>
</div>
</div>
</div>
</div>
<强>更新
正如Jesse Buitenhuis所说，使用单一课程会更好。添加data-collapse-toggle =＆＃34; collapseOne＆＃34;到了ul。并使用以下js解决了你的两个问题。 js fiddle Here
$('#accordion .panel-heading ul li').click(function(){
var target = $('#' + $(this).parent().data('collapse-toggle'));
$("#accordion .panel-heading ul li").not($(this)).removeClass('active');
if ($(this).hasClass('active'))
{ target.collapse('toggle'); }
else
{
target.collapse({toggle:false});
target.collapse('show');
}
});
HTML
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<div data-toggle="collapse" data-parent="#accordion" href="">
<ul id="tabs" class="nav nav-pills" data-collapse-toggle="collapseOne" data-tabs="tabs">
<li><a href="#red" data-toggle="tab">Red</a></li>
<li class="active"><a href="#orange" data-toggle="tab">Orange</a></li>
<li><a href="#yellow" data-toggle="tab">Yellow</a></li>
<li><a href="#green" data-toggle="tab">Green</a></li>
<li><a href="#blue" data-toggle="tab">Blue</a></li>
</ul>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane active" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div data-toggle="collapse" data-parent="#accordion" href="">
<ul id="tabsb" data-collapse-toggle="collapseTwo" class="nav nav-pills" data-tabs="tabs">
<li><a href="#One" data-toggle="tab">One</a></li>
<li><a href="#To" data-toggle="tab">To</a></li>
<li><a href="#Three" data-toggle="tab">Three</a></li>
<li><a href="#Four" data-toggle="tab">Four</a></li>
</ul>
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="One">
<h1>One</h1>
<p>One One One One One One</p>
</div>
<div class="tab-pane active" id="To">
<h1>To</h1>
<p>To To To To To</p>
</div>
<div class="tab-pane" id="Three">
<h1>Three</h1>
<p>Three Three Three Three Three</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="Four">
<h1>Four</h1>
<p>Four Four Four Four Four</p>
</div>
</div>
</div>
</div>
</div>
</div>
答案 3 :(得分：0)
如果您希望在单击它们时关闭活动标签，请修改Thibaud Graniers javascript，如下所示：
$(function(){
$("#collapseOne .panel-collapse").collapse('show');
$("#collapseOne .panel-heading ul li a").click(function(){
$("#collapseOne .panel-collapse").collapse('show');
$("#collapseTwo .panel-collapse").collapse('hide');
$("#collapseTwo .nav .active").removeClass('active');
if($(this).parent('.active').length){
$("#collapseOne .panel-collapse").collapse('hide');
}
});
$("#collapseTwo .panel-heading ul li a").click(function(){
$("#collapseTwo .panel-collapse").collapse('show');
$("#collapseOne .panel-collapse").collapse('hide');
$("#collapseOne .nav .active").removeClass('active');
if($(this).parent('.active').length){
$("#collapseTwo .panel-collapse").collapse('hide');
}
});
}）;
答案 4 :(得分：0)
谢谢大家。
下面是一些编辑后的最终工作代码：
虽然我还有一个小问题：
当添加多于2行时，在首次加载时单击例如“蓝色”时，所有其他行都会打开一点。
任何建议？
由于 阿维
代码：
HTML
<div class="panel panel-default">
<div class="panel-heading">
<div data-toggle="collapse" data-parent="#accordion" href="">
<ul id="tabs" class="nav nav-pills" data-collapse-toggle="collapseOne" data-tabs="tabs">
<li><a href="#red" data-toggle="tab">Red</a></li>
<li class="active"><a href="#orange" data-toggle="tab">Orange</a></li>
<li><a href="#yellow" data-toggle="tab">Yellow</a></li>
<li><a href="#green" data-toggle="tab">Green</a></li>
<li><a href="#blue" data-toggle="tab">Blue</a></li>
</ul>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane active" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div data-toggle="collapse" data-parent="#accordion" href="">
<ul id="tabsb" data-collapse-toggle="collapseTwo" class="nav nav-pills" data-tabs="tabs">
<li><a href="#One" data-toggle="tab">One</a></li>
<li><a href="#To" data-toggle="tab">To</a></li>
<li><a href="#Three" data-toggle="tab">Three</a></li>
<li><a href="#Four" data-toggle="tab">Four</a></li>
</ul>
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="One">
<h1>One</h1>
<p>One One One One One One</p>
</div>
<div class="tab-pane" id="To">
<h1>To</h1>
<p>To To To To To</p>
</div>
<div class="tab-pane" id="Three">
<h1>Three</h1>
<p>Three Three Three Three Three</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="Four">
<h1>Four</h1>
<p>Four Four Four Four Four</p>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div data-toggle="collapse" data-parent="#accordion" href="">
<ul id="tabsb" data-collapse-toggle="collapseTree" class="nav nav-pills" data-tabs="tabs">
<li><a href="#Avi" data-toggle="tab">Avi</a></li>
<li><a href="#Moshe" data-toggle="tab">Moshe</a></li>
<li><a href="#David" data-toggle="tab">David</a></li>
</ul>
</div>
</div>
<div id="collapseTree" class="panel-collapse collapse">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="Avi">
<h1>Avi</h1>
<p>Avi Avi Avi Avi Avi Avi</p>
</div>
<div class="tab-pane" id="Moshe">
<h1>Moshe</h1>
<p>Moshe Moshe Moshe Moshe Moshe</p>
</div>
<div class="tab-pane" id="David">
<h1>David</h1>
<p>David David David David David</p>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div data-toggle="collapse" data-parent="#accordion" href="">
<ul id="tabsb" data-collapse-toggle="collapseFour" class="nav nav-pills" data-tabs="tabs">
<li><a href="#Table" data-toggle="tab">Table</a></li>
<li><a href="#chare" data-toggle="tab">chare</a></li>
</ul>
</div>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="Table">
<h1>Table</h1>
<p>Table Table Table Table Table Table</p>
</div>
<div class="tab-pane" id="chare">
<h1>chare</h1>
<p>chare chare chare chare chare</p>
</div>
</div>
</div>
</div>
</div>
</div>
JS
$('#accordion .panel-heading ul li').click(function () {
var target = $('#' + $(this).parent().data('collapse-toggle'));
$("#accordion .panel-heading ul li").not($(this)).removeClass('active');
if ($(this).hasClass('active')) {
$('.collapse').collapse('hide');
target.collapse('toggle');
}
else {
$('.collapse').each(function() {
if(!$(this).is(target[0])){
$(this).collapse('hide');
}else{
console.log('MATCH');
}
});
target.collapse({toggle: false});
target.collapse('show');
}
});
bootply代码示例：here。
感谢分配
阿维