打开另一个下拉菜单时关闭下拉菜单

Question

我有一个带有多个按钮的垂直侧边栏导航菜单，每个按钮都包含一个链接下拉菜单。单击按钮会显示导航菜单中的锚链接下拉列表（例如 TF000120），以及主内容区域导航菜单右侧的 div（例如“森林”）。目前，如果我点击一个按钮，它的 div 和下拉菜单都显示得很好。但是，如果我在关闭第一个按钮之前单击另一个按钮，则会打开两组 div 和下拉菜单。当点击另一个按钮时，我将如何做到这一点，在显示新的 div 和下拉链接之前，当前打开的 div 和下拉链接再次被隐藏？

我在 W3 上使用了this 教程。

HTML（导航菜单）

<nav class="sidenav">
            <a href="#theforest" class="dropdown-btn" onclick="toggle_visibility('theforest');">The Forest
            </a>
            <div class="dropdown-container">
                <a class="entry-num" href="#TF000120">[TF000120]</a>
                <a class="entry-num" href="#TF000220">[TF000220]</a>
                <a class="entry-num" href="#TF000320">[TF000320]</a>
            </div>
            <a href="#theocean" class="dropdown-btn" onclick="toggle_visibility('theocean');">The Ocean</a>
            <div class="dropdown-container" >
                <a class="entry-num" href="#TO000120">[TO000120]</a>
                <a class="entry-num" href="#TO000220">[TO000220]</a>
                <a class="entry-num" href="#TO000320">[TO000320]</a>
            </div>
            <a href="#thesky" class="dropdown-btn" onclick="toggle_visibility('thesky');">The Sky</a>
            <div class="dropdown-container" >
                <a class="entry-num" href="#TS000120">[TS000120]</a>
                <a class="entry-num" href="#TS000220">[TS000220]</a>
                <a class="entry-num" href="#TS000320">[TS000320]</a>
            </div>
        </nav>

JS

    <script>
        var dropdown = document.getElementsByClassName("dropdown-btn");
        var i;

        for (i = 0; i < dropdown.length; i++) {
            dropdown[i].addEventListener("click", function() {
                this.classList.toggle("active");
                var dropdownContent = this.nextElementSibling;
                if (dropdownContent.style.display === "block") {
                    dropdownContent.style.display = "none";
                    } else {
                    dropdownContent.style.display = "block";
                    }
                });
            }
    </script>


<!--Toggle Function-->

  <script type="text/javascript">

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
</script>

谢谢！

Answer 1

在点击时重置所有下拉菜单的样式，然后再显示新的：

dropdown[i].addEventListener("click", function() {
        //hide all divs that may be visible
        var lst = document.getElementsByClassName("dropdown-containder");
        for (var j = 0; j < lst.length; j++) { lst[j].style.display = "none";}

        //show the dive that the user selected
        this.classList.toggle("active");
        var dropdownContent = this.nextElementSibling;
        if (dropdownContent.style.display === "block") {
            dropdownContent.style.display = "none";
        } else {
            dropdownContent.style.display = "block";
        }
    });
}