javascript 允许我折叠扩展的 Accordion

Question

我有一个侧面导航栏，它由多个 Accordion 组成，展开后会显示更多导航按钮。我有一些 JavaScript，一次只允许展开其中一个 Accordion 。但是，如果我单击一个 Accordion 将其展开，当我单击同一个 Accordion 时，它会保持打开状态。

我想得到它，这样我就可以展开和折叠 Accordion ，而不必展开另一个 Accordion 。

JavaScript:

var acc = document.getElementsByClassName("nav-link-bottom-main");
var i;
var last;
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        if (last) {
            last.nextElementSibling.classList.toggle("show");
        }
        this.nextElementSibling.classList.toggle("show");
        last = this;
    }
}

html:

<div>
    <button class="nav-link-bottom-main toggle"><a href="#">Endpoint Section 1</a></button>
    <div class="panel">
        <button class="nav-link-bottom-sub toggle"><a class="GET-icon"><center>GET</center></a><a href="#">endpoint 1.1</a></button>
        <button class="nav-link-bottom-sub toggle"><a class="GET-icon"><center>GET</center></a><a href="#">endpoint 1.2</a></button>
        <button class="nav-link-bottom-sub toggle"><a class="GET-icon"><center>GET</center></a><a href="#">endpoint 1.3</a></button>
    </div>

    <button class="nav-link-bottom-main toggle"><a href="#">Endpoint Section 2</a></button>
    <div class="panel">
        <button class="nav-link-bottom-sub toggle"><a class="GET-icon"><center>GET</center></a><a href="#">endpoint 2.1</a></button>
        <button class="nav-link-bottom-sub toggle"><a class="GET-icon"><center>GET</center></a><a href="#">endpoint 2.2</a></button>
        <button class="nav-link-bottom-sub toggle"><a class="GET-icon"><center>GET</center></a><a href="#">endpoint 2.3</a></button>
        <button class="nav-link-bottom-sub toggle"><a class="GET-icon"><center>GET</center></a><a href="#">endpoint 2.4</a></button>
    </div>

Answer 1

看起来只要 if (last) 条件为真并且它是与 this 相同的元素，您就会切换 show 类两次在同一元素上，所以这可能就是它保持打开状态的原因(实际上它同时关闭并再次打开)。

因此请尝试检查您是否没有像这样切换相同的元素:

if (last && last != this) {
    last.nextElementSibling.classList.toggle("show");
}
this.nextElementSibling.classList.toggle("show");

希望对您有所帮助。