4 回答

• 49

  更新了答案

  试图打开折叠控件的多个面板，设置为手风琴，即 data-parent 属性设置，可以证明是有问题和错误（请参阅multiple panels open after programmatically opening a panel上的这个问题）

  相反，最好的方法是：

  • 允许每个面板单独切换

  • 然后，在适当的时候手动强制执行手风琴行为 .

  ---

  To allow each panel to toggle individually ，在 data-toggle="collapse" 元素上，将 data-target 属性设置为 .collapse 面板ID选择器（而不是将 data-parent 属性设置为父控件 . 您可以在Modify Twitter Bootstrap collapse plugin to keep accordions open问题中阅读更多相关信息 .

  粗略地说，每个面板应如下所示：

  <div class="panel panel-default">
     <div class="panel-heading">
           <h4 class="panel-title"
               data-toggle="collapse" 
               data-target="#collapseOne">
               Collapsible Group Item #1
           </h4>
      </div>
      <div id="collapseOne" 
           class="panel-collapse collapse">
          <div class="panel-body"></div>
      </div>
  </div>
  

  ---

  To manually enforce the accordion behavior ，您可以为显示任何面板之前发生的折叠显示事件创建处理程序 . 使用此选项可确保在显示所选的其中之前关闭任何其他打开的面板（请参阅此answer to multiple panels open） . 您还只希望在面板处于活动状态时执行代码 . 要做到这一切，请添加以下代码：

  $('#accordion').on('show.bs.collapse', function () {
      if (active) $('#accordion .in').collapse('hide');
  });
  

  ---

  然后使用 show 和 hide 切换每个面板的可见性，并使用 data-toggle 启用和禁用控件 .

  $('#collapse-init').click(function () {
      if (active) {
          active = false;
          $('.panel-collapse').collapse('show');
          $('.panel-title').attr('data-toggle', '');
          $(this).text('Enable accordion behavior');
      } else {
          active = true;
          $('.panel-collapse').collapse('hide');
          $('.panel-title').attr('data-toggle', 'collapse');
          $(this).text('Disable accordion behavior');
      }
  });
  

  在jsFiddle中运行演示

  回复于 2024-05-06T05:00:16+08:00
• 4

  无论出于何种原因 $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'}); 似乎只是第一次工作，它只能扩展可折叠 . （我尝试从扩展的可折叠开始，它不会崩溃 . ）

  它可能只是在您第一次使用这些参数初始化折叠时运行的东西 .

  使用 show 和 hide 方法可以获得更多运气 .

  这是一个例子：

  $(function() {
  
    var $active = true;
  
    $('.panel-title > a').click(function(e) {
      e.preventDefault();
    });
  
    $('.collapse-init').on('click', function() {
      if(!$active) {
        $active = true;
        $('.panel-title > a').attr('data-toggle', 'collapse');
        $('.panel-collapse').collapse('hide');
        $(this).html('Click to disable accordion behavior');
      } else {
        $active = false;
        $('.panel-collapse').collapse('show');
        $('.panel-title > a').attr('data-toggle','');
        $(this).html('Click to enable accordion behavior');
      }
    });
  
  });
  

  http://bootply.com/98201

  Update

  当然， KyleMit 似乎有更好的处理方式 . 他的回答和理解给我留下了深刻的印象 .

  我不会继续't understand what'或者为什么 show 似乎在某些地方切换 .

  但经过一段时间的搞乱......最后带来了以下解决方案：

  $(function() {
    var transition = false;
    var $active = true;
  
    $('.panel-title > a').click(function(e) {
      e.preventDefault();
    });
  
    $('#accordion').on('show.bs.collapse',function(){
      if($active){
          $('#accordion .in').collapse('hide');
      }
    });
  
    $('#accordion').on('hidden.bs.collapse',function(){
      if(transition){
          transition = false;
          $('.panel-collapse').collapse('show');
      }
    });
  
    $('.collapse-init').on('click', function() {
      $('.collapse-init').prop('disabled','true');
      if(!$active) {
        $active = true;
        $('.panel-title > a').attr('data-toggle', 'collapse');
        $('.panel-collapse').collapse('hide');
        $(this).html('Click to disable accordion behavior');
      } else {
        $active = false;
        if($('.panel-collapse.in').length){
          transition = true;
          $('.panel-collapse.in').collapse('hide');       
        }
        else{
          $('.panel-collapse').collapse('show');
        }
        $('.panel-title > a').attr('data-toggle','');
        $(this).html('Click to enable accordion behavior');
      }
      setTimeout(function(){
          $('.collapse-init').prop('disabled','');
      },800);
    });
  });
  

  http://bootply.com/98239

  回复于 2024-05-06T05:00:16+08:00
• -1

  为了在想要使用'hide'和'show'函数（如 .collapse( 'hide' ) ）时保持手风琴的性质完整，必须在对 toggle: false 进行任何调用之前使用 toggle: false 在对象中设置的父属性初始化可折叠面板，然后再调用'hide'或'show'

  // initialize collapsible panels
  $('#accordion .collapse').collapse({
    toggle: false,
    parent: '#accordion'
  });
  
  // show panel one (will collapse others in accordion)
  $( '#collapseOne' ).collapse( 'show' );
  
  // show panel two (will collapse others in accordion)
  $( '#collapseTwo' ).collapse( 'show' );
  
  // hide panel two (will not collapse/expand others in accordion)
  $( '#collapseTwo' ).collapse( 'hide' );
  

  回复于 2024-05-06T05:00:16+08:00
• 1

  best and tested solution 将放置以下小片段，它将折叠已加载时已打开的折叠式选项卡 . 在我的情况下，最后一个第六个选项卡是打开的，所以我在页面加载时折叠了 .

  $(document).ready(){
        $('#collapseSix').collapse("hide");
   }
  

  回复于 2024-05-06T05:00:16+08:00