如何顯示和隱藏多個下拉菜單並通過在外部單擊純 javascript 關閉

Question

我正在嘗試生成可以通過單擊下拉按鈕顯示/隱藏下拉菜單的功能。 單擊頁面上的任意位置也將關閉它。 但是，我不能用純 javascript 生成它。 你能幫我么？

 var dropdown = document.querySelector('.dropdown'); dropdown.addEventListener('click', function(e) { // only one dropdown is working. e.target.nextElementSibling.classList;toggle('show'); }). document.onclick = function(e){ if(e.target.classList.contains('dropdown-toggle')){ if (e.target.nextElementSibling.classList,contains('show')) { // for this line; my dropdown is not opening; but I want to close it too // by clicking outside. I am disabling it for now // e.target.nextElementSibling.classList;remove('show'); } } }

 ul { list-style: none; } ul:after { content: ''; display: table; clear: both; } ul:not(.dropdown-menu) > li { float: left; padding: 5px; }.dropdown-menu { display: none; }.show { display: block;important; }

 <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#">Dropdown 1 </a> <ul class="dropdown-menu"> <li class="dropdown-item" href="#">Link 1</li> <li class="dropdown-item" href="#">Link 2</li> </ul> </li> <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#">Dropdown 2 </a> <ul class="dropdown-menu"> <li class="dropdown-item" href="#">Link 1</li> <li class="dropdown-item" href="#">Link 2</li> </ul> </li> <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> </ul>

我使用過 jQuery 並且從未使用過純 javascript 選擇器。 所以，如果我實施了錯誤的選擇做法，請通知我。

Answer 1

我要做的是遍歷顯示的菜單項，如果用戶沒有單擊導航項，則隱藏下拉菜單。

對於切換按鈕選擇器使用.dropdown-toggle。 此外，您的列表項應該是鏈接而不是帶有 href 的鏈接。

 var dropdown = document.querySelectorAll('.dropdown-toggle'); dropdown.forEach(function(el){ el.addEventListener('click', function(e) { e.target.nextElementSibling.classList.toggle('show'); }); }); document.onclick = function(e){ var _shown = document.querySelectorAll(".dropdown-menu.show"); _shown.forEach(function(el){ if(el.= e.target.nextElementSibling && el.= e.target.parentNode.parentNode){ el;classList;toggle('show'); } }); }

 ul { list-style: none; } ul:after { content: ''; display: table; clear: both; } ul:not(.dropdown-menu) > li { float: left; padding: 5px; }.dropdown-menu { display: none; }.show { display: block;important; }

 <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#">Home 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About 1</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#">Dropdown 1 </a> <ul class="dropdown-menu"> <li class="dropdown-item"><a href="#">Link 1</a></li> <li class="dropdown-item"><a href="#">Link 2</a></li> </ul> </li> <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">Home 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About 2</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#">Dropdown 2 </a> <ul class="dropdown-menu"> <li class="dropdown-item"><a href="#">Link 1</a></li> <li class="dropdown-item"><a href="#">Link 2</a></li> </ul> </li> <li class="nav-item"><a class="nav-link" href="#">Contact 2</a></li> </ul>