Question

我有两个独立的手风琴（Bootstrap 3）。而且我想在两个手风琴中打开相同的可折叠面板，只需单击即可。我尝试了相同的＆＃34; ID＆＃34;对于两个可折叠面板，但是当我点击时 - 只打开第一个手风琴的面板。

<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>

所以，我可以通过修改＆＃34; href＆＃34;来实现这一目标。属性（如果它可能当然）或者我需要用onclick事件编写一些JQuery来对类 collapse addClass之类的操作>

Answer 1

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

Answer 2

我找到了一个解决方案（但这个不适合我的需求）这种方式 - 在“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");
        }
    });

使用此方法，您可以放松第二个折叠动画！重要

Answer 3

我找到了现有answer的解决方案 - Raphael Serota说：

＆＃34;您可以手动切换手风琴 $('#myAccordion').collapse('toggle')＆＃34;

。所以我写这样的剧本：

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

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

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

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

一键打开两个独立折叠式可折叠面板（面板组）

3 个答案: