javascript–Bootstrap Accordion展开折叠全部无法正常运行

概述这是打破这个的过程：>单击音乐符号>单击“展开/全部折叠”>单击音乐符号>单击“展开/全部折叠”>再次单击“展开/折叠全部”请注意,音乐符号不会打开备份,即使您应该能够在函数中看到逻辑表明所有面板都已关闭且应该打开.为什么？我究竟做错了什么？HTML：<button class='btn btn-default btn-s

这是打破这个的过程：

>单击音乐符号
>单击“展开/全部折叠”
>单击音乐符号
>单击“展开/全部折叠”
>再次单击“展开/折叠全部”

请注意,音乐符号不会打开备份,即使您应该能够在函数中看到逻辑表明所有面板都已关闭且应该打开.为什么？我究竟做错了什么？

HTML：

JS：
var toggleFormat = false;$('#expandAllFormats').on('click',function(e) {        e.preventDefault();        console.log(toggleFormat);        $("#accordionFormat .panel-collapse").each(function(index,value){            if (toggleFormat){                if($(this).hasClass('in')){                    $(this).collapse('toggle');                    console.log("This panel is open. it will be closed");                } else {                    console.log("This panel is closed. it will stay closed");                }            } else {                if(!$(this).hasClass('in')){                    $(this).collapse('toggle');                    console.log("This panel is closed. it will be open");                } else {                    console.log("This panel is open. it will stay open");                }            }        });        toggleFormat = toggleFormat ? false : true;    });
最佳答案问题在于所有面板的状态与任何单个面板的状态不同,因为手风琴与数据父对象一起工作的方式.你的展开/折叠所有按钮处理程序需要完全覆盖正常的手风琴行为.
展开/折叠所有单击处理程序必须跟踪最后一个状态(全部展开或全部折叠),因为Bootstrap Collapse组件单独处理每个单独面板的状态(一次只打开一个).否则,将无法知道是打开还是关闭单独的切换面板.
$('#expandAllFormats').on('click',function () {   if ($(this).data("lastState") === null || $(this).data("lastState") === 0) {        // close all        $('.collapse.in').collapse('hide');        // next state will be open all        $(this).data("lastState",1);        $(this).text("Expand All");    }    else {        // initial state...        // override accordion behavior and open all        $('.panel-collapse').removeData('bs.collapse')        .collapse({parent:false,toggle:false})        .collapse('show')        .removeData('bs.collapse')         // restore single panel behavior        .collapse({parent:'#accordionFormat',toggle:false});        // next state will be close all        $(this).data("lastState",0);        $(this).text("Collapse All");    }});
http://www.codeply.com/go/76Hl6s49rb
OFC,另一种方法是简单地删除data-parent =属性并完全禁用手风琴行为.
          总结       
以上是内存溢出为你收集整理的javascript  –  Bootstrap Accordion展开/折叠全部无法正常运行全部内容，希望文章能够帮你解决javascript  –  Bootstrap Accordion展开/折叠全部无法正常运行所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
原文地址:https://54852.com/web/1119038.html