如何使用自举手风琴将两个手风琴折叠起来

我正在使用自举手风琴，并希望为一个手风琴按钮设置两个可折叠的div。如何使用自举手风琴将两个手风琴折叠起来

问题是使用id和两个相同id的bootstrap不能在同一页上。

对我的挑战是，崩塌能够DIV不相同父下下跌，以及

<div class="left-col"> 
<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"> 
       Title 1 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"> 
       Content 1 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingTwo"> 
      <h4 class="panel-title"> 
       Title 2 
      </h4> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
      <div class="panel-body"> 
       Content 2 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingThree"> 
      <h4 class="panel-title"> 
       Title 3 
      </h4> 
     </div> 
     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
      <div class="panel-body"> 
       Content 3 
      </div> 
     </div> 
    </div> 
</div> 
</div> 
<div class="right-col"> 
<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"> 
        Title 1 
       </a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"> 
       Content 1 
      </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"> 
        Title 2 
       </a> 
      </h4> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
      <div class="panel-body"> 
       Content 2 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingThree"> 
      <h4 class="panel-title"> 
       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
        Title 3 
       </a> 
      </h4> 
     </div> 
     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
      <div class="panel-body"> 
       Content 3 
      </div> 
     </div> 
    </div> 
</div>

来源

2017-04-12 Stacy J

可以使手风琴用JavaScript崩溃。给他们一个共享类，并使用一些点击然后折叠这样的逻辑。

$('#button_to_trigger_collapse').click(function(){ 
    $('.div_to_collapse').collapse('toggle'); 
});

有关如何改进行为的更多信息，请参阅此处的文档。

http://getbootstrap.com/javascript/#via-javascript-3

来源

2017-04-12 14:04:47 Goose

这只是折叠手风琴，如果它是开放的。不要在另一次点击时打开它。另外，如果有6对可折叠的内容，我需要用6个不同的类和ID编写脚本 –

@StacyJ您的问题没有指定打开备份。正如我所说，你可以看到链接的文档，特别是切换功能。是的，你需要为每一对都做这件事，bootstrap需要一些方法来知道你在寻找什么行为，而你所寻找的不仅仅是类和数据属性所支持的。 – Goose

@StacyJ我更新了使用切换标志的答案，我相信这会给你你当前请求的行为。 – Goose

如何使用自举手风琴将两个手风琴折叠起来

回答

相关问题