在 DIV 外部單擊以隱藏它

Question

這是我的 HTML 頁面的一個簡單示例，我有一個帶有下拉菜單display: 'none' ，當我點擊<li class="main-ul-li clickToDropDown">Example</li>時，它會顯示菜單display: 'block' ...

現在我的問題是：當我在菜單之外（在 li 和 div 之外）單擊時，如何再次隱藏菜單？
我的代碼是 100% vanilla JavaScript

謝謝！

 const dropdown_function = () => { const dropdown_menu = document.querySelector('.dropdown-menu'); const dropdown_li = document.querySelector('.clickToDropDown'); dropdown_li.addEventListener('click', () => { dropdown_menu.style.display = 'block'; }); } dropdown_function();

 ul { list-style: none; }.main-ul { display: flex; align-items: center; }.main-ul-li { margin:10px 20px; cursor: pointer; }.dropdown-menu { position: absolute; top: 60px; display: none; }

 <!DOCTYPE html> <html> <head> <title>Example</title> </head> <body> <header> <nav> <!-- Navbar --> <ul class="main-ul"> <!-- ul --> <li class="main-ul-li clickToDropDown">Example</li> <!-- li --> <div class="dropdown-menu"> <!-- dropdown menu --> <ul> <li>Example1</li> <li>Example2</li> <li>Example3</li> </ul> </div> <li class="main-ul-li">Example</li> <li class="main-ul-li">Example</li> </ul> </nav> </header> </body> </html>

Answer 1

編輯：
我找到了解決方案-

const dropdown_function = () => {
    const dropdown_menu = document.querySelector('.dropdown-menu');
    const dropdown_li = document.querySelector('.clickToDropDown');

    dropdown_li.addEventListener('click', () => {
        dropdown_menu.style.display = 'block';

<!--func added-->
        document.addEventListener('mouseup', function(e) {
          if (!dropdown_menu.contains(e.target)) {
            dropdown_menu.style.display = 'none';
          }
        });
<!--/func added-->

        });
}

Answer 2

您可以添加如下內容：

document.addEventListener('click', function(event) {
    var isClickInside = dropdown_li.contains(event.target);
    if (isClickInside) {
      //More Stuff
    }
    else {
      dropdown_menu.style.display = 'none';
    }
});

在 DIV 外部單擊以隱藏它

問題描述

2 個解決方案

解決方案1
0 2020-05-14 11:49:45

解決方案2
0 2020-05-14 11:50:48

在 DIV 外部單擊以隱藏它

問題描述

2 個解決方案

解決方案1 0 2020-05-14 11:49:45

解決方案2 0 2020-05-14 11:50:48

解決方案1
0 2020-05-14 11:49:45

解決方案2
0 2020-05-14 11:50:48