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

发布时间:2020-01-13 发布网站:大佬教程
大佬教程收集整理的这篇文章主要介绍了javascript – Bootstrap Accordion展开/折叠全部无法正常运行大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

这是打破这个的过程:

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

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

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展开/折叠全部无法正常运行所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ群:277859234,请注明来意。