未打开手风琴菜单的第二个菜单

Question

我正在使用此手风琴菜单。

JavaScript：

var acc = document.getElementsByClassName("accordion"), i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
}

HTML：

<!DOCTYPE html>
<html>
<head>
<style>
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;
}
</style>
</head>
<body>
    <h2>Accordion with symbols</h2>
    <p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
    <button class="accordion">Section 3</button>
    <div id="foo" class="panel">
        <p>
            <button class="accordion">Section 3</button>
            <div id="foo" class="panel">
                <p></p>
            </div>
        </p>
    </div>
</body>
</html>

我需要使用第3节中的第二个菜单。我在此手风琴菜单中添加了另一个手风琴菜单，但它没有打开。 有什么想法吗？ 我怎么解决这个问题？

Answer 1

在以下HTML结构中，我将P标签替换为DIV标签。 P元素不能包含像DIV这样的块级元素。

参考：如何将DIV放在P中？ 和P标签

<body>
    <h2>Accordion with symbols</h2>
    <p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
    <button class="accordion">Section 3</button>
    <div id="foo" class="panel">
        <div>
            <button class="accordion">Section 3</button>
            <div id="foo" class="panel">
                <div>
                  test
                </div>
            </div>
        </div>
    </div>
</body>

click事件不适用于您的原始HTML结构，因为浏览器更改了DOM元素，并且DIV元素已从P标签内部移除（使用上述参考链接说明了原因）。 当我们检索nextElementSibling此DOM更改导致出现问题。

如果可以解决您的问题，请接受此答案。

未打开手风琴菜单的第二个菜单

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-11-22 09:22:06

未打开手风琴菜单的第二个菜单

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-11-22 09:22:06

解决方案1
2 已采纳 2016-11-22 09:22:06