jquery – Bootstrap 3折叠手风琴:折叠所有作品,但是在维护数据父代时无法展开

前端之家收集整理的这篇文章主要介绍了jquery – Bootstrap 3折叠手风琴:折叠所有作品,但是在维护数据父代时无法展开前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用Bootstrap 3并尝试设置以下手风琴/折叠结构:

> Onload:一组中的每个手风琴小组完全崩溃,作为记录/预期的功能
>按钮单击:每个手风琴面板展开并单击切换无效(包括URL锚点效果)。
>另一个按钮点击:所有面板返回上载状态;全部折叠和正常点击。

我已经做到了第2步,但是当我在第3步再次点击按钮时,它没有任何效果。我也看不到Chrome开发工具中报告的控制台错误,或通过本地JSHint运行代码

每次点击按钮时,我都希望这个循环是可重复的。

我已经在http://bootply.com/98140http://jsfiddle.net/A9vCx/设置了我的代码

我很想知道我在做错什么,我很感激你的建议。谢谢!

我的HTML:

  1. <button class="collapse-init">Click to disable accordion behavior</button>
  2. <br><br>
  3. <div class="panel-group" id="accordion">
  4. <div class="panel panel-default">
  5. <div class="panel-heading">
  6. <h4 class="panel-title">
  7. <a data-toggle="collapse" data-parent="#accordion" href="#collapSEOne">
  8. Collapsible Group Item #1
  9. </a>
  10. </h4>
  11. </div>
  12. <div id="collapSEOne" class="panel-collapse collapse">
  13. <div class="panel-body">
  14. Anim pariatur cliche reprehenderit,enim eiusmod high life accusamus terry richardson ad squid.
  15. </div>
  16. </div>
  17. </div>
  18. <div class="panel panel-default">
  19. <div class="panel-heading">
  20. <h4 class="panel-title">
  21. <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
  22. Collapsible Group Item #2
  23. </a>
  24. </h4>
  25. </div>
  26. <div id="collapseTwo" class="panel-collapse collapse">
  27. <div class="panel-body">
  28. Anim pariatur cliche reprehenderit,enim eiusmod high life accusamus terry richardson ad squid.
  29. </div>
  30. </div>
  31. </div>
  32. <div class="panel panel-default">
  33. <div class="panel-heading">
  34. <h4 class="panel-title">
  35. <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
  36. Collapsible Group Item #3
  37. </a>
  38. </h4>
  39. </div>
  40. <div id="collapseThree" class="panel-collapse collapse">
  41. <div class="panel-body">
  42. Anim pariatur cliche reprehenderit,enim eiusmod high life accusamus terry richardson ad squid.
  43. </div>
  44. </div>
  45. </div>
  46. </div>

我的JS:

  1. $(function() {
  2.  
  3. var $active = true;
  4.  
  5. $('.panel-title > a').click(function(e) {
  6. e.preventDefault();
  7. });
  8.  
  9. $('.collapse-init').on('click',function() {
  10. if(!$active) {
  11. $active = true;
  12. $('.panel-title > a').attr('data-toggle','collapse');
  13. $('.panel-collapse').collapse({'toggle': true,'parent': '#accordion'});
  14. $(this).html('Click to disable accordion behavior');
  15. } else {
  16. $active = false;
  17. $('.panel-collapse').collapse({'toggle': true,'parent': '#accordion'});
  18. $('.panel-title > a').removeAttr('data-toggle');
  19. $(this).html('Click to enable accordion behavior');
  20. }
  21. });
  22.  
  23. });

解决方法

更新答案

尝试打开设置为手风琴,即数据 – 父属性集的折叠控件的多个面板可能证明是相当有问题和错误的(请参阅multiple panels open after programmatically opening a panel上的此问题)

相反,最好的办法是:

>允许每个面板单独切换
>然后,在适当的情况下手动执行手风琴行为。

要允许每个面板单独切换,在data-toggle =“collapse”元素上,将data-target属性设置为.collapse面板ID选择器(而不是将父母父属性设置为父控件),您可以阅读更多关于这个问题Modify Twitter Bootstrap collapse plugin to keep accordions open

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

  1. <div class="panel panel-default">
  2. <div class="panel-heading">
  3. <h4 class="panel-title"
  4. data-toggle="collapse"
  5. data-target="#collapSEOne">
  6. Collapsible Group Item #1
  7. </h4>
  8. </div>
  9. <div id="collapSEOne"
  10. class="panel-collapse collapse">
  11. <div class="panel-body"></div>
  12. </div>
  13. </div>

要手动执行手风琴行为,您可以为任何面板显示之前出现的崩溃显示事件创建一个处理程序。使用此功能可确保任何其他打开的面板在选定的面板显示之前关闭(请参阅此answer to multiple panels open)。您还将只希望代码在面板处于活动状态时执行。要做到这一点,添加以下代码

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

然后使用显示和隐藏来切换每个面板和数据切换的可见性,以启用和禁用控件。

  1. $('#collapse-init').click(function () {
  2. if (active) {
  3. active = false;
  4. $('.panel-collapse').collapse('show'); $('.panel-title').attr('data-toggle','');
  5. $(this).text('Enable accordion behavior');
  6. } else {
  7. active = true;
  8. $('.panel-collapse').collapse('hide'); $('.panel-title').attr('data-toggle','collapse');
  9. $(this).text('Disable accordion behavior');
  10. }
  11. });

Working demo in jsFiddle

猜你在找的jQuery相关文章