當您在菜單外部單擊時，是什么讓這個下拉菜單隱藏起來？

Question

我正在查看此 W3schools頁面上的第一個下拉按鈕示例，當您在下拉菜單框之外單擊時，我似乎無法弄清楚 JavaScript 的哪個部分負責隱藏菜單。

 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the Traveled Distance dropdown menu 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'); } } } }

 /* Dropdown Button */ .dropbtn { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* Dropdown button on hover & focus */ .dropbtn:hover, .dropbtn:focus { background-color: #2980B9; } /* The container <div> - needed to position the dropdown content */ .dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* Change color of dropdown links on hover */ .dropdown-content a:hover {background-color: #ddd} /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ .show {display:block;}

 <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> </div> </div>

我知道 W3schools 有非常准確的描述，但是這個描述並沒有讓我充分了解 JS 在這種特殊情況下是如何工作的。

我很高興聽到任何額外的解釋和對偽代碼的翻譯。 謝謝！

PS：我問是因為我正在復制它以在頁面內多次使用，並且在其中一次單擊外部時它無法隱藏菜單，而它與僅分別更改類和 ID 的結構相同.

此外，對我來說，主要的困惑來源是代碼片段的這一部分：

        if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
        }

在這種情況下，什么樣的對象是“展示”？ 它只是一個字符串嗎？ 它是添加到某些元素的類嗎？ 如果不是，那是什么？

這里還有我的 JavaScript 文件的所有內容，這些內容在 myFunction() 上失敗，但在 showCountries() 上的工作方式與我期望的一樣與我的 JS 中提到的不同：

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the Traveled Distance dropdown menu 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');
      }
    }
  }
}

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function showCountries() {
    document.getElementById("myDropdownCountry").classList.toggle("show");
}
  
// Close the Country dropdown menu if the user clicks outside of it
window.onclick = function(event) {
    if (!event.target.matches('.dropbtnCountry')) {
        var dropdowns = document.getElementsByClassName("dropdown-contentCountry");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
      }
    }
}

function writeCountryContents(countryChoice) {
//  de.onclick = outputChoice() {
        document.getElementById('buttonContent').innerHTML = countryChoice;
//  }
}

function writeTravelContents(dropDownChoice) {
//  de.onclick = outputChoice() {
        document.getElementById('traveledDistance').innerHTML = dropDownChoice;
//  }
}

這也是分成兩個文件的兩個下拉列表的比較（我最初將它們放在一個文件中），除了幾個空格和重命名的函數之外，我沒有發現其他區別，以便我可以使它工作：

Answer 1

window.onclick = function(event) { // add event listener on window
  if (!event.target.matches('.dropbtn')) { // check whether click was made outside of dropdown
    var dropdowns = document.getElementsByClassName("dropdown-content"); // find all elements with class dropdown-content
    var i;
    for (i = 0; i < dropdowns.length; i++) { // iterate through all dropdowns
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) { // check whether it has class 'show'
        openDropdown.classList.remove('show'); // remove class 'show'
      }
    }
  }
}

你在窗口上有點擊監聽器。 當您在下拉菜單之外單擊並調用openDropdown.classList.remove('show');時它會觸發