单击正文时如何关闭菜单下拉菜单

Question

我有一个工作正常的下拉菜单。 该按钮允许我打开和关闭菜单，但是，如果我单击正文页面，菜单不会关闭，只有单击按钮才能关闭它。

因此，即使我单击页面正文或其他任何不是按钮的内容，我也希望它关闭。 我正在尝试使用 document.body.addEventListener 关闭菜单，但它不起作用，我不明白我做错了什么。 有人可以通过正确的方式来帮助我吗？

我很感激任何回应，谢谢。

 var usermenu = document.querySelector(".user_menu_button"); function userMenu() { var x = document.getElementById("mts_menu"); if (x.classList.toggle ("show")) { usermenu.innerHTML = '<i class="icn_button fa-solid fa-xmark"></i><span class="txt_button">Account</span>'; } else { usermenu.innerHTML = '<i class="icn_button fa-solid fa-bars"></i><span class="txt_button">Account</span>'; } } // Close Menu clicking on body or Anywhere document.body.addEventListener("click", function() { var x = document.getElementById("mts_menu"); // For var x if (e.target.id !== "mts_menu" && x.classList.contains("show")) { x.classList.toggle("show"); } });

 /*Button Toggle Menu*/ .user_menu_button { display: flex; align-content: center; justify-content: center; align-items: center; width: 100%; height: 32px; background: #3D4350!important; border-radius: 4px; padding: 12px; font-size: 14px!important; line-height: 2; } .icn_button { margin: 0; } .icn_button:before, .icn_button:after { margin: 0; } .txt_button { margin-left: 10px; color: #fff; font-size: 14px; font-weight: 400; } /*Items menu*/ .user_menu { display: flex; flex-direction: column; } .user_menu.header { padding: 15px 15px; } /*Menu header info*/ .display.name { font-size: 14px; font-weight: 500; color: #303238; line-height: 1.5; } .display.mail { font-size: 13px; color: #1E70EB; line-height: 1.5; } hr.divider-menu { border-top: 1px solid #e0e0e0; } /*Text Link css*/ .mnu_margin { margin: 7px 0; } .user_menu.item > a { display: flex; justify-content: flex-start; align-items: center; padding: 8px 15px; color: #212629; } .user_menu.item:hover > a { color: #fff; background: #1E70EB; transition: all 0.2s; } .user_menu.item > a .link_text { font-size: 14px; color: #212629; } .user_menu.item:hover > a .link_text { color: #fff; } /*Icon Items Menu*/ .icn_menu:before, .icon_menu:after { margin: 0px; padding: 0px; font-size: 16px } .icn_menu { margin-right: 10px; display: flex !important; align-items: center; justify-content: center; width: 22px; height: 22px; } /* User Menu For header website */ .mts_menu_container { display: flex; flex-direction: column; align-content: flex-end; align-items: flex-end; } .dropdown_box { position: absolute; margin-top: 20px; } .mts_dropdown_content { background-color: #fff; min-width: 160px; width: 240px; border-radius: 6px; overflow-x: hidden; overflow-y: hidden; box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; z-index: 999; position: relative; visibility: hidden; opacity: 0; top: 50px; height: 0; transition: visibility 0.2s, max-height 0.2s, opacity 0.2s, top 0.2s, height 0.2s; } .mts_dropdown_content.show { height: 100%; visibility: visible; opacity: 1; top: 0; transition: visibility 0.2s, max-height 0.2s, opacity 0.2s, top 0.2s, height 0.2s; }

 <button onclick="userMenu()" class="user_menu_button"> <i class="icn_button fa-solid fa-bars"></i> <span class="txt_button">Account</span> </button> <div class="mts_menu_container"> <div class="dropdown_box"> <div id="mts_menu" class="mts_dropdown_content"> <div class="user_menu header"> <span class="display name">Ciao [display_name]</span> <span class="display mail">[display_email]</span> </div> <hr class="divider-menu"> <div class="mnu_margin"> <div class="user_menu item"> <a href="/account"> <i class="icn_menu fa-regular fa-user"></i> <span class="link_text">Dashboard</span> </a> </div> <div class="user_menu item"> <a href="ordini"> <i class="icn_menu fa-regular fa-basket-shopping"></i> <span class="link_text">I miei ordini</span> </a> </div> <div class="user_menu item"> <a href="libreria"> <i class="icn_menu fa-regular fa-cloud-arrow-down"></i> <span class="link_text">Downloads</span> </a> </div> <div class="user_menu item"> <a href="impostazioni"> <i class="icn_menu fa-regular fa-gear"></i> <span class="link_text">Impostazioni</span> </a> </div> <div class="user_menu item last"> <a href="wp-login.php?action=logout"> <i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i> <span class="link_text">Logout</span> </a> </div> </div> </div> </div> </div>

Answer 1

侦听document对象上的单击事件。 在处理程序内部，使用Element.closest()检查单击的元素是否在导航内部。

const usermenu = document.querySelector(".user_menu_button")
const menu = document.querySelector('#mts_menu');

document.addEventListener('click', event => {
  const isClickedOutsideMenu = event.target.closest('#mts_menu') === null;
  if (isClickedOutsideMenu && menu.classList.contains('open')) {
    menu.classList.remove('open');
    usermenu.innerHTML = '<i class="icn_button fa-solid fa-bars"></i><span class="txt_button">Account</span>';
  }
});

Answer 2

我以这种方式解决了它，还要感谢@Emiel的帮助，我添加了event.stopPropagation(); 接着

//Closing Menu Part
const closing = document.querySelector("#mts_menu");
document.addEventListener("click", (evt) => {
  if (!evt.target.closest("#mts_menu")) closing.classList.remove("show");
});

 var usermenu = document.querySelector(".user_menu_button"); function userMenu() { event.stopPropagation(); //For Closing menu var x = document.getElementById("mts_menu"); if (x.classList.toggle ("show")) { usermenu.innerHTML = '<i class="icn_button fa-solid fa-xmark"></i><span class="txt_button">Account</span>'; } else { usermenu.innerHTML = '<i class="icn_button fa-solid fa-bars"></i><span class="txt_button">Account</span>'; } } //Closing Menu Part const closing = document.querySelector("#mts_menu"); document.addEventListener("click", (evt) => { if (!evt.target.closest("#mts_menu")) closing.classList.remove("show"); });

 /*Button Toggle Menu*/ .user_menu_button { display: flex; align-content: center; justify-content: center; align-items: center; width: 100%; height: 32px; background: #3D4350!important; border-radius: 4px; padding: 12px; font-size: 14px!important; line-height: 2; } .icn_button { margin: 0; } .icn_button:before, .icn_button:after { margin: 0; } .txt_button { margin-left: 10px; color: #fff; font-size: 14px; font-weight: 400; } /*Items menu*/ .user_menu { display: flex; flex-direction: column; } .user_menu.header { padding: 15px 15px; } /*Menu header info*/ .display.name { font-size: 14px; font-weight: 500; color: #303238; line-height: 1.5; } .display.mail { font-size: 13px; color: #1E70EB; line-height: 1.5; } hr.divider-menu { border-top: 1px solid #e0e0e0; } /*Text Link css*/ .mnu_margin { margin: 7px 0; } .user_menu.item > a { display: flex; justify-content: flex-start; align-items: center; padding: 8px 15px; color: #212629; } .user_menu.item:hover > a { color: #fff; background: #1E70EB; transition: all 0.2s; } .user_menu.item > a .link_text { font-size: 14px; color: #212629; } .user_menu.item:hover > a .link_text { color: #fff; } /*Icon Items Menu*/ .icn_menu:before, .icon_menu:after { margin: 0px; padding: 0px; font-size: 16px } .icn_menu { margin-right: 10px; display: flex !important; align-items: center; justify-content: center; width: 22px; height: 22px; } /* User Menu For header website */ .mts_menu_container { display: flex; flex-direction: column; align-content: flex-end; align-items: flex-end; } .dropdown_box { position: absolute; margin-top: 20px; } .mts_dropdown_content { background-color: #fff; min-width: 160px; width: 240px; border-radius: 6px; overflow-x: hidden; overflow-y: hidden; box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; z-index: 999; position: relative; visibility: hidden; opacity: 0; top: 50px; height: 0; transition: visibility 0.2s, max-height 0.2s, opacity 0.2s, top 0.2s, height 0.2s; } .mts_dropdown_content.show { height: 100%; visibility: visible; opacity: 1; top: 0; transition: visibility 0.2s, max-height 0.2s, opacity 0.2s, top 0.2s, height 0.2s; }

 <button onclick="userMenu()" class="user_menu_button"> <i class="icn_button fa-solid fa-bars"></i> <span class="txt_button">Account</span> </button> <div class="mts_menu_container"> <div class="dropdown_box"> <div id="mts_menu" class="mts_dropdown_content"> <div class="user_menu header"> <span class="display name">Ciao [display_name]</span> <span class="display mail">[display_email]</span> </div> <hr class="divider-menu"> <div class="mnu_margin"> <div class="user_menu item"> <a href="/account"> <i class="icn_menu fa-regular fa-user"></i> <span class="link_text">Dashboard</span> </a> </div> <div class="user_menu item"> <a href="ordini"> <i class="icn_menu fa-regular fa-basket-shopping"></i> <span class="link_text">I miei ordini</span> </a> </div> <div class="user_menu item"> <a href="libreria"> <i class="icn_menu fa-regular fa-cloud-arrow-down"></i> <span class="link_text">Downloads</span> </a> </div> <div class="user_menu item"> <a href="impostazioni"> <i class="icn_menu fa-regular fa-gear"></i> <span class="link_text">Impostazioni</span> </a> </div> <div class="user_menu item last"> <a href="wp-login.php?action=logout"> <i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i> <span class="link_text">Logout</span> </a> </div> </div> </div> </div> </div>