一键打开位于两个独立手风琴中的两个可折叠面板（面板组）

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 事件对元素 class 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 中找到了解决方案说：

"You can manually toggle the accordion with $('#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");
        }
});

这与我之前的解决方案一样有效，但保留了动画运行。

一键打开位于两个独立手风琴中的两个可折叠面板（面板组）

One Click to Open Two Collapsible Panels that are in Two Separate Accordions(Panel-Group)

panel

accordion

collapsable

twitter-bootstrap