关闭下拉菜单的问题

Question

当我在下拉菜单外单击时，下拉菜单必须关闭。 如何关闭下拉菜单？ 这是我的代码：

<div class="pull-right srch-box">
     <button onclick="search_function()" class="dropbtn"><i class="fa fa-search" aria-hidden="true"></i></button>
     <div id="myDropdown" class="dropdown-content">
          <form>
              <div class="input-group search-box form-group">
                 <input type="text" id="search" class="form-control" placeholder="Search here...">
                 <button type="button" class="btn btn-primary ">Search</i></button>
              </div>
          </form>
     </div>
</div>

打开下拉菜单的 js 脚本：

function search_function() {
    document.getElementById("myDropdown").classList.toggle("show");
}
 

关闭下拉菜单的js脚本是什么？

Answer 1

尝试这样的事情：

const dropdown = document.getElementById("myDropdown");

window.addEventListener('click', e => e.target !== dropdown ? dropdown.classList.remove('show') : false);

基本上它会在整个窗口上放置一个事件......如果你点击它不是下拉菜单将删除显示类