时间戳

首页 > 解决方案 > javascript允许我折叠扩展的手风琴

javascript - javascript允许我折叠扩展的手风琴

问题描述

我有一个侧面导航栏，它由多个手风琴组成，展开时会显示更多导航按钮。我有一些 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>

标签： javascripthtml

解决方案

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

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

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

我希望它有所帮助。

推荐阅读