一键打开两个可折叠面板在两个独立的手风琴(面板-组)

Question

我有两个分开的手风琴(Bootstrap 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的元素与类崩溃?

Answer 1

您可以使用bootstrap .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>

Answer 2

我从一个已有的答案中找到了一个解决方案- Raphael Serota说:

"您可以手动切换手风琴与$('#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");
        }
});

这就像我之前的解决方案，但保持动画运行

Answer 3

我找到了一个解决方案(但是这个不适合我的需求)这种方式-在"href"属性上使用类似的id并以这种方式访问它们:

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

使用此方法，您将丢失第二个折叠动画!重要