Question

以下给出的代码用于折叠/展开。我使用了这个代码，其中有多个面板标题可以折叠/展开。它工作正常，但我不知道这是如何工作的。我从网上拿了这个代码。如果有人可以解释，这里发生了什么或者指向某个地方，我可以在这里阅读有关这将是有帮助的。第二，我可以在不更改页面的情况下使用相同的功能，其中只有一个面板标题div。如果是，请举例说明。

function bindCollapseEvents(panels, numPanels) {
    for (var i = 0 ; i < panels.length ; i++) {
        var heading = $(panels[i]).children('.panel-heading');
        var bodyCollapse = $(panels[i]).children('.panel-body');
        if (heading.length != 0 && bodyCollapse.length != 0) {
            numPanels++;
            // $(heading[0]).attr('data-toggle', 'collapse');
            // Use this instead of the data-toggle attribute to let [more/less] be clicked without collapsing panel
            if ($(heading[0]).attr('class') == 'panel-heading') {
                $(heading[0]).click(toggleSingleCollapse);
            }
            $(heading[0]).attr('data-target', '#panelBodyCollapse');
            $(heading[0]).attr('id', 'panelHeading');
            $(heading[0]).css('cursor', 'pointer');
            $(bodyCollapse[0]).attr('id', 'panelBodyCollapse');
        }
    }
    return numPanels;
}




function toggleSingleCollapse(e) {
    if (!$(e.target).is('a') && !$(e.target).is('input')) {
        var glyphIcon = $(this).find('.glyphicon');
        var className = $(glyphIcon[0]).attr('class');
        if (className.indexOf('glyphicon-chevron-up') != -1) {
            hideSingleCollapse($(e.currentTarget).attr('data-target'));
        } else {
            showSingleCollapse($(e.currentTarget).attr('data-target'));
        }
    }
}



function showSingleCollapse(e) {
    var heading = $(e).parent().children('.panel-heading');
    var glyphIcon = $(heading[0]).find('.glyphicon');
    $(glyphIcon[0]).removeClass('glyphicon-chevron-down');
    $(glyphIcon[0]).addClass('glyphicon-chevron-up');
    $(e).collapse('show');
    $(heading).find('a.btn').show();
}

function hideSingleCollapse(e) {
    var heading = $(e).parent().children('.panel-heading');
    var glyphIcon = $(heading[0]).find('.glyphicon');
    $(glyphIcon[0]).removeClass('glyphicon-chevron-up');
    $(glyphIcon[0]).addClass('glyphicon-chevron-down');
    $(e).collapse('hide');
    $(heading).find('a.btn').hide();
}

Answer 1

上述代码中的主要内容是切换逻辑，用于hide/show各自的内容。

开关逻辑在这里唯一要做的是在控制其可见性的元素上添加/删除相应的CSS class，如手风琴

切换逻辑模块： showSingleCollapse(e)＆amp; hideSingleCollapse(e)

除此之外，还有验证检查的逻辑，如果它已经存在，则不添加相同的css class。

我的建议： jQuery Accordion本身有更好的手风琴逻辑，但您可以参考此代码来了解 Accordion 背后的真实逻辑

面板标题体的折叠/扩展

1 个答案: