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

这是打破这个的过程：

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

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


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展开/折叠全部无法正常运行

猜你在找的HTML相关文章