当前位置: 首页 > 知识库问答 >
问题:

Bootstrap 3折叠手风琴:折叠所有工作,但在维护数据父级时无法扩展所有工作

易镜
2023-03-14

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

>

按钮点击:每个手风琴面板展开,点击切换没有效果(包括URL锚效果)。

另一个按钮点击:所有面板返回到onload状态;所有折叠并可正常单击。

我已经完成了第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');
    }
  });

});

共有3个答案

湛嘉歆
2023-03-14

为了在还想使用“隐藏”和“显示”功能(如)时保持手风琴的性质不变。崩溃(“隐藏”),您必须使用在对象中设置的父属性初始化可折叠面板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' );
谷彦君
2023-03-14

无论出于什么原因$('. panel-的崩溃')。崩溃({'toggle': true,'父':'#手风琴'});似乎只在第一次工作,它只适用于展开可折叠的。(我试图从展开的可折叠的开始,它不会崩溃。)

它可能只是第一次使用这些参数初始化崩溃时运行一次的东西。

使用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

使现代化

当然,凯尔米特似乎比我更有办法处理这件事。他的回答和理解给我留下了深刻的印象。

我不明白发生了什么,也不明白为什么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

胡弘毅
2023-03-14

尝试打开折叠控件的多个面板,该折叠控件设置为一个手风琴,即使用数据父属性集,可能会出现很大的问题和错误(请参阅关于以编程方式打开面板后打开的多个面板的问题)

相反,最好的方法是:

  1. 允许每个面板单独切换
  2. 然后,在适当的地方手动执行手风琴行为

要允许每个面板单独切换,请在data-toggle="崩溃"元素上,将data-Target属性设置为。崩溃面板ID选择器(而不是将data-父属性设置为父控件。您可以在修改Twitter Bootstrap折叠插件以保持手风琴打开的问题中阅读有关此的更多信息。

大致来说,每个面板应该如下所示:

<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>

要手动强制执行手风琴行为,您可以为在显示任何面板之前发生的折叠显示事件创建一个处理程序。使用它来确保在显示所选面板之前关闭任何其他打开的面板(请参阅此对多个面板打开的回答)。您还只希望代码在面板处于活动状态时执行。要执行所有这些,请添加以下代码:

$('#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');
    }
});
 类似资料:
  • 我正在使用href链接和可折叠标题制作手风琴菜单。问题是,当我单击子手风琴时,它会折叠父级。有什么解决方法吗? 这是更新的版本,它正在工作。解决方案是使用“”(如@Renan Arajo所述)并删除手风琴上的标题设置。 https://codepen.io/CocoSkin/pen/vRQyZP

  • 我有一个自定义手风琴,像jQuery UI手风琴。我还试图使任何展开的项目可折叠(如果再次单击)。类似这样:https://jqueryui.com/accordion/#collapsible但是我不知道如何在当前扩展的项目上捕获另一个单击事件。有人能给我指一下正确的方向吗? 我的jQuery如下所示: 这是jsbin:http://jsbin.com/hazaxunuwa/edit?html,

  • 我在primeface对话框中有一个primeface手风琴面板,每次对话框(对话框是动态的="true")打开时,手风琴面板的所有面板都会折叠。 accordionPanel有一个特性,它可以有0到2个面板,直到用户单击菜单项时才知道这一点。这些面板的存在与否取决于支持bean中是否存在2个对象。 我的代码: 我试过以下方法,但都没有达到预期的效果 在打开/关闭对话框之前,在JS/Jquery中

  • 我正在尝试在我的android应用程序中实现折叠工具栏。我可以按我希望的方式显示工具栏,但滚动时它不会塌陷。 我正在使用以下代码 activity.xml main_toolbar.xml 下面是屏幕的外观

  • 所以我坚持使用一个插件,它提供了一个简单的手风琴,但不提供自动折叠。我试图创建一个简单的脚本,但我没有成功。 让我提供一些DOM结构: 假设结构不言自明,但有一点是:当类被删除时,它会扩展项目(在我看来,这与构建手风琴的方式相反...)。 不知何故,触发jQuery脚本的唯一方法是针对标头()。它应该做的是找到每个没有类并添加它,同时将其从父类中删除。 我最好的猜测是这段jQuery。 谁能告诉我

  • 本文向大家介绍bootstrap手风琴折叠示例代码分享,包括了bootstrap手风琴折叠示例代码分享的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了bootstrap手风琴的具体代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。