Закрыть раскрывающийся список при открытии другого раскрывающегося списка

Question

У меня есть вертикальное меню навигации на боковой панели с несколькими кнопками, каждая из которых содержит выпадающий список ссылок. При нажатии кнопки открывается выпадающий список якорных ссылок в навигационном меню (например, TF000120) и элемент div (например, «лес») справа от навигационного меню в основной области содержимого. В настоящее время, если я нажимаю кнопку, ее div и выпадающий раскрываются нормально. Однако, если я нажму другую кнопку перед закрытием первой, откроются как наборы div, так и выпадающие списки. Как сделать так, чтобы при нажатии другой кнопки открытые в настоящее время ссылки div и раскрывающиеся списки снова скрывались перед открытием новых ссылок div и раскрывающихся списков?

Я использовал это руководство по W3 .

HTML (меню Nav)

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