一键打开两个可折叠面板是在两个分开的手风琴（面板-集团）

我有两个分离的手风琴（引导3）。我只想单击一次即可在两个手风琴中打开相同的可折叠面板。我用两个可折叠面板的“ID”试了一下，但是当我点击 - 只有第一个手风琴的面板打开。一键打开两个可折叠面板是在两个分开的手风琴（面板-集团）

<div class="panel-group" id="accordion"> 
<div class="panel"> 
    <div class="panel-heading" data-toggle="collapse" href="#collapseOne"> // 1* i want when i click this 2* 
    </div> 
</div> 
</div> 
<div class="panel-group" id="accordion"> 
<div class="panel"> 
    <div class="panel-heading" data-toggle="collapse" href="#collapseOne"> // 2* this to be open too 
    </div> 
</div> 
</div>

所以，我可以实现与（如果它当然可能）修改的“href”属性或者我需要写一些JQuery的与onclick事件做这样的事情addClass的元素与类折叠？

来源

2015-10-06 Ceylan Mumun Kocabaş

我找到了解决方案，从现有的answer - 拉斐尔塞罗塔说：

“你可以手动切换手风琴与 $('#myAccordion').collapse('toggle')”

。所以，我写我的剧本是这样的：

$('.panel-heading').click(function(){ 

    var href = $(this).attr('href'); 

    if($(href + "Dyn").hasClass("in")){ 
      $(href + "Dyn").collapse("toggle"); 
     }else{ 
      $(href + "Dyn").collapse("toggle"); 
     } 
});

这个作品就像我以前的解决方案，但保持了动画的运行。

来源

2015-10-08 12:30:14

您可以使用Bootstraps.collapse('toggle')来达致这。看例子。

$('.panel-default').on('click', function() { 
 
    $('.panel-collapse').collapse('toggle'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading" role="tab" id="headingOne"> 
 
     <h4 class="panel-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
 
      Collapsible Group Item #1 
 
     </a> 
 
     </h4> 
 

 
    </div> 
 
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
 
     <div class="panel-body">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 class="panel panel-default"> 
 
    <div class="panel-heading" role="tab" id="headingTwo"> 
 
     <h4 class="panel-title"> 
 
     <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
 
      Collapsible Group Item #2 
 
     </a> 
 
     </h4> 
 

 
    </div> 
 
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
     <div class="panel-body">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>

来源

2015-10-06 13:50:15 vanburen

我说的是两个独立的手风琴，而当我点击手风琴ONE的3号面板，从手风琴两个在同一时间被打开3号面板，你的答案是很好，但没有解决我的problem.Anyway罐你这么多:) –

我找到了解决方案（但是这一个不适合我的需要）这样 - 对的 “href” similiar的ID属性和accesing他们这样说：

$('.panel-heading').click(function(){ 
     var href = $(this).attr('href'); 
     if($(href + "Dyn").hasClass("in")){ 
      $(href + "Dyn").removeClass("in"); 
     }else{ 
      $(href + "Dyn").addClass("in"); 
     } 
    });

有了这个方法，你失去的第二合拢动画！重要

来源

2015-10-07 15:25:14

一键打开两个可折叠面板是在两个分开的手风琴（面板-集团）

回答

相关问题