jquery 引导 程序 3 折叠 折叠 :collapse all 可以 工作 , 但 在 维护 data-parent 时 无法 全部 展开

9q78igpj  于 2022-11-22  发布在  jQuery
关注(0)|答案(4)|浏览(188)

我 正在 使用 Bootstrap 3 并 尝试 设置 以下 折叠 结构 :

  1. Onload : 组 中 的 每个 折叠 面板 完全 折叠 , 并 按 记录/预期 运行 。
    1.按钮 点击 :每个 折叠 面板 都会 展开 , 单击 切换 不会 产生 任何 效果 ( 包括 URL 锚 点 效果 ) 。
    1.另 一 个 按钮 点击 :所有 面板 恢复 加载 状态 ;都 像 平常 一样 折叠 并 可 点击 。
    我 已经 完成 了 第 2 步 , 但是 当 我 在 第 3 步 再次 点击 按钮 时 , 它 没有 任何 效果 。 我 也 没有 在 Chrome 开发 工具 中 看到 控制 台 错误 报告 , 或者 通过 我 的 本地 JSHint 运行 代码 。
    我 希望 每次 单击 按钮 时 都 能 重复 此 循环 。
    我 在 这里 设置 了 代码 http://bootply.com/98140 , 在 这里 设置 了 代码 http://jsfiddle.net/A9vCx/
    我 很 想 知道 我 做 错 了 什么 , 我 很 感激 你 的 建议 。 谢谢 !
    我 的 HTML :
<button class="collapse-init">Click to disable accordion behavior</button>
<br><br>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

中 的 每 一 个
我 的 JS :

$(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({'toggle': true, 'parent': '#accordion'});
      $(this).html('Click to disable accordion behavior');
    } else {
      $active = false;
      $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
      $('.panel-title > a').removeAttr('data-toggle');
      $(this).html('Click to enable accordion behavior');
    }
  });

});

格式

rqmkfv5c

rqmkfv5c1#

更新的答案

尝试打开一个折叠控件的多个面板,该折叠控件设置为可折叠控件,即设置了data-parent属性,这可能会带来相当大的问题和缺陷(请参阅multiple panels open after programmatically opening a panel上的此问题)
相反,最好的方法是:
1.允许每个面板单独切换
1.然后,在适当的位置手动强制执行折叠行为。

若要允许每个面板单独切换,请在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>

若要手动强制执行折叠行为,您可以为collapse show事件创建一个处理程序,该事件在显示任何面板之前发生。使用该处理程序可以确保在显示所选面板之前关闭任何其他打开的面板(请参阅此answer to multiple panels open)。您还希望代码仅在面板处于活动状态时执行。若要执行所有这些操作,请添加以下代码:

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

然后使用showhide切换每个面板的可见性,使用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');
    }
});

Working demo in jsFiddle的名字

envsm3lx

envsm3lx2#

不管 出于 什么 原因 , $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'}); 似乎 只 在 第 一 次 工作 , 而且 它 只 在 展开 可 折叠 的 时候 工作 。 ( 我 试 着 从 展开 的 可 折叠 的 开始 , 它 不会 折叠 。 )
它 可能 只是 在 你 第 一 次 用 这些 参数 初始 化 collapse 时 运行 一 次 的 东西 。
使用 showhide 方法 会 更 幸运 。
以下 是 一 个 示例 :

$(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 的 最 大 值

    • 更新 * *

当然 , 凯尔 米特 似乎 比 我 更 能 处理 这个 问题 。 我 对 他 的 回答 和 理解 印象 深刻 。
我 不 明白 发生 了 什么 , 也 不 明白 为什么 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 格式

j5fpnvbx

j5fpnvbx3#

要在同时使用“hide”和“show”函数(如.collapse( 'hide' ))时保持折叠特性不变,必须在调用“hide”或“show”之前,使用toggle: false在对象中设置的父属性初始化可折叠面板

// 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' );
zsohkypk

zsohkypk4#

最好的和经过测试的解决方案是把下面的小片段,这将折叠折叠标签,这是已经打开时,你加载。在我的情况下,最后第六个标签是打开的,所以我使它折叠页面加载。

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

相关问题