如果用户在下拉菜单之外单击，则关闭下拉菜单

Question

我有 2 个下拉按钮。 如果我点击外部/或它，它会关闭，但如果我点击另一个下拉按钮，它不会关闭，另一个会弹出。 当我单击另一个按钮或它之外的任何东西时，我想关闭它。

 function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } function myFunction1() { document.getElementById("myDropdown1").classList.toggle("show"); } window.onclick = function(e) { if (!e.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); for (var d = 0; d < dropdowns.length; d++) { var openDropdown = dropdowns[d]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <ul> <li><a href="index.php" class="cmn-t-underline">Acasa</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()" style="cursor:pointer">Infinatri firme</a> <div class="dropdown-content" id="myDropdown"> <a href="infintare_societate_limitata.php"> Societate cu raspundere limitata (SRL) </a> </div> </li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn" onclick="myFunction1()" style="cursor:pointer">Modificari firma</a> <div class="dropdown-content" id="myDropdown1"> <a href="modificari_actualizare_date.php">Actualizare date de identificare</a> </div> </li>

Answer 1

您可以告诉任何单击隐藏下拉列表，以及任何使其成为下拉列表父级的单击以停止冒泡。

/* Anything that gets to the document
 /* Anything that gets to the document
   will hide the dropdown */
$(document).click(function(){
  $("#dropdown").hide();
});

/* Clicks within the dropdown won't make
   it past the dropdown itself */
$("#dropdown").click(function(e){
 e.stopPropagation();
});

Answer 2

您可以触发结束myDropdown1上的点击事件myDropdown ，反之亦然。

Answer 3

你可以这样。

 function myFunction(event, dropDownName) { //Pass in your dropdownName which is the dropdown var dropDownHandler = document.getElementById(dropDownName); dropDownHandler.classList.toggle("show"); // Get the trigger element of the dropdown var menuHandler = event.currentTarget; if (dropDownHandler.classList.contains("show")) { //Attach only when the dropdown is active, //to ensure onclick isn't called always document.addEventListener("click", function(docEvent) { documentHandler(docEvent, menuHandler) }); } else { dropDownHandler.classList.toggle("show"); // If is closed, remove the handler document.removeEventListener("click", documentHandler); } function documentHandler(event, menuHandler) { if (menuHandler.contains(event.target)) { dropDownHandler.classList.add("show"); } else { dropDownHandler.classList.remove("show"); } } }

 .show { display: block !important; } .dropdown-content { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <ul> <li><a href="index.php" class="cmn-t-underline">Acasa</a> </li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn" onclick="myFunction(event, 'myDropdown')" style="cursor:pointer">Infinatri firme</a> <div class="dropdown-content" id="myDropdown"> <a href="infintare_societate_limitata.php"> Societate cu raspundere limitata (SRL) </a> </div> </li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn" onclick="myFunction(event, 'myDropdown1')" style="cursor:pointer">Modificari firma</a> <div class="dropdown-content" id="myDropdown1"> <a href="modificari_actualizare_date.php">Actualizare date de identificare</a> </div> </li> </ul> </nav>

Answer 4

我知道已经有很长一段时间了，但我很想回答这个问题，以防有人发现自己处于这种情况。 所以你有两个按钮，因此需要一个循环来关闭每个下拉内容。

 function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } function myFunction1() { document.getElementById("myDropdown1").classList.toggle("show"); } // This is what I added. you have 2 dropdowns, therefore a loop will // close the dropdown content if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <ul> <li><a href="index.php" class="cmn-t-underline">Acasa</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()" style="cursor:pointer">Infinatri firme</a> <div class="dropdown-content" id="myDropdown"> <a href="infintare_societate_limitata.php"> Societate cu raspundere limitata (SRL) </a> </div> </li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn" onclick="myFunction1()" style="cursor:pointer">Modificari firma</a> <div class="dropdown-content" id="myDropdown1"> <a href="modificari_actualizare_date.php">Actualizare date de identificare</a> </div> </li>