面板標題主體的折疊/展開

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)和hideSingleCollapse(e)

除此之外，還有用於驗證檢查的邏輯，例如如果已經存在，則不要添加相同的css class 。

我的建議： jQuery手風琴本身有更好的手風琴邏輯，但是您可以參考此代碼以了解手風琴背后的真實邏輯