如何通过单击页面上的任意位置来关闭下拉菜单？

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 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 myFunction2() { document.getElementById("myDropdown2").classList.toggle("show"); } // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn2')) { var dropdown = document.getElementsByClassName("dropdown-content2"); var e; for (e = 0; i < dropdown.length; e++) { var opendropdown = dropdown[e]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } 

 /* Dropdown Button */ .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* Dropdown button on hover & focus */ .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } /* 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: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } /* 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: #f1f1f1 } /* 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; } /* Dropdown Button */ .dropbtn2 { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* Dropdown button on hover & focus */ .dropbtn2:hover, .dropbtn2:focus { background-color: #3e8e41; } /* The container <div> - needed to position the dropdown content */ .dropdown2 { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content2 { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } /* Links inside the dropdown */ .dropdown-content2 a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* Change color of dropdown links on hover */ .dropdown-content2 a:hover { background-color: #f1f1f1 } /* 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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tr> <td> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </td> <td> <div class="dropdown2"> <button onclick="myFunction2()" class="dropbtn">Dropdown2</button> <div id="myDropdown2" class="dropdown-content2"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </td> </tr> </table> 

Answer 1

您可以按照以下方式进行操作。 切换类时，无需编写代码即可删除类。

只需删除窗口单击。

 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction(event) { event.stopPropagation(); document.getElementById("myDropdown").classList.toggle("show"); } function myFunction2(event) { event.stopPropagation(); document.getElementById("myDropdown2").classList.toggle("show"); } // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { document.getElementById("myDropdown").classList.remove("show"); document.getElementById("myDropdown2").classList.remove("show"); } 

 /* Dropdown Button */ .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* Dropdown button on hover & focus */ .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } /* 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: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } /* 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: #f1f1f1 } /* 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; } /* Dropdown Button */ .dropbtn2 { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* Dropdown button on hover & focus */ .dropbtn2:hover, .dropbtn2:focus { background-color: #3e8e41; } /* The container <div> - needed to position the dropdown content */ .dropdown2 { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content2 { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } /* Links inside the dropdown */ .dropdown-content2 a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* Change color of dropdown links on hover */ .dropdown-content2 a:hover { background-color: #f1f1f1 } /* 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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tr> <td> <div class="dropdown"> <button onclick="myFunction(event)" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </td> <td> <div class="dropdown2"> <button onclick="myFunction2(event)" class="dropbtn">Dropdown2</button> <div id="myDropdown2" class="dropdown-content2"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </td> </tr> </table> 

Answer 2

借助jquery，可以按以下方式准备处理某些元素外部点击的功能

function outsideElementClickEvent(elm, callback) {
    function isClickedOutside(e){
        var container = $(elm);

        if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            callback();
        }
    }

    $(document).mouseup(isClickedOutside);
    return isClickedOutside;
},

/**
 * It removes outside element handler passed in as a parameter.
 *
 * @param handler
 */
function removeOutsideElementHandler(handler) {
    if (handler) {
        $(document).unbind("mouseup", handler);
    }
}