Question

我已经在我的网站上添加了手风琴https://www.freemakermedia.com/work-with-me/，您可以在这里看到＆＃34;完成您的网站＆＃34;和周末网站战士＆＃34;周末网站战士＆＃34;添加了两个手风琴领域，并通过按下它们的面板打开，一切正常。但我的问题是，一旦打开一个面板重叠退出开放面板，面板就会重叠。

我想隐藏之前打开的面板，这样它们就不会相互重叠。我已经尝试了不同的解决方案来隐藏以前打开的面板，当点击第二个手风琴领域但没有运气。下面是我的JS代码。

        //Js file for accordian

var acc = document.getElementsByClassName("accordian-left");
var i;
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight){
            panel.style.maxHeight = null;
            panel.style.zIndex = "0";
            panel.style.border = "0";
            } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
        jQuery(this).css('margin-bottom','10px');
        panel.style.zIndex = "1";
        panel.style.border = "3px solid #eee";
        } 
     }
  }

Answer 1

在this.classList.toggle("active");之前的功能中，您可以使用for循环重置每个手风琴，使其无效。或者将for循环中的所有内容组合在一起以隐藏其他所有面板，并仅在单击的面板上运行切换：

function showPanel(panel) {
    panel.style.maxHeight = panel.scrollHeight + "px";
    jQuery(this).css('margin-bottom','10px');
    panel.style.zIndex = "1";
    panel.style.border = "3px solid #eee";
}

function hidePanel(panel) {
    panel.style.maxHeight = null;
    panel.style.zIndex = "0";
    panel.style.border = "0";
}

function togglePanel(panel) {
    if (panel.style.maxHeight){
        hidePanel(panel);
    } else {
        showPanel(panel);
    }
}

var acc = document.getElementsByClassName("accordian-left");
var i;
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        var hideAnim = false;
        for (j = 0; j < acc.length; j++) {
            if (this != acc[j] && acc[j].classList.contains("active")) {
                acc[j].classList.remove("active");
                hidePanel(acc[j].nextElementSibling);
                hideAnim = true;
            }
        }
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (hideAnim) {
            setTimeout(function() {
              togglePanel(panel);
            }, 400);
        } else {
            togglePanel(panel);
        }
    }
}

手风琴面板在选择一个与先前打开（第二）面板上重叠

1 个答案: