Question

我有一个侧面导航栏，其中包含多个手风琴，展开时会显示更多的导航按钮。我有一点JavaScript，一次只能扩展其中的一个手风琴。但是，如果单击一个手风琴将其展开，则当我单击相同的手风琴时，它将保持打开状态。

我想要得到它，这样我就可以扩展和折叠手风琴而不必扩展另一个手风琴。

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");

我希望这会有所帮助。

JavaScript让我可以折叠扩展的手风琴

1 个答案: