Question

我有两支手风琴，现在我的任务是如果我可以点击任何一支手风琴它将自动打开（展开）两支手风琴，如果我关闭任何一支自动关闭（折叠）两支手风琴。有可能吗？请任何一个帮助我用示例代码。我使用bootstrap和jquery。

Answer 1

看看这个fiddle，这样做的工作却有点不同。

它会在anchor tag点击

上展开和折叠

http://jsfiddle.net/s5hAw/781/

您还可以查看这个简单的plugin，即可完成工作

http://accordion-cd.blogspot.in/

Answer 2

你正在寻找这样的东西吗？

Fiddler：https://jsfiddle.net/99x50s2s/119/

已解决的问题：

使用通用类进行手风琴控制，并在标题

代码：

$('.collapse-link').on('click', function(){
    $('.collapseOne').collapse('toggle');
});

<强> HTML

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading headingOne" role="tab">
      <h4 class="panel-title">
        <a class="collapse-link" role="button" data-toggle="collapse" data-parent="#accordion" href="#" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div class="panel-collapse collapseOne collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Some test content 1
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading headingOne" role="tab">
      <h4 class="panel-title">
        <a class="collapse-link" role="button" data-toggle="collapse" data-parent="#accordion" href="#" aria-expanded="false" aria-controls="collapseOne">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div class="panel-collapse collapseOne collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Some test content 2
      </div>
    </div>
  </div>  
</div>

用jquery打开多个手风琴

2 个答案: