且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

一次只能打开一个手风琴选项卡

更新时间:2023-11-18 14:14:49

为了实现这一点,您需要在每次点击时将手风琴的状态重置为原始状态,然后在点击元素上设置所需的类。要做到这一点,您可以提取功能来将类名设置为各自的功能,并根据需要调用它。试试这个:

To achieve this you need to reset the state of the accordion back to its original state on each click, before you set the required classes on the clicked elements. To do that you can extract functionality to set the class names in to their own function and call it as required. Try this:

var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');

for (var i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        var setClasses = !this.classList.contains('active');
        setClass(acc, 'active', 'remove');
        setClass(panel, 'show', 'remove');

        if (setClasses) {
            this.classList.toggle("active");
            this.nextElementSibling.classList.toggle("show");
        }
    }
}

function setClass(els, className, fnName) {
    for (var i = 0; i < els.length; i++) {
        els[i].classList[fnName](className);
    }
}

工作示例