我正在嘗試通過單擊正文或其他內容來關閉下拉選單。為此,我正在使用document.addEventListener
,但它不起作用。
通過進行幾次測驗,我設法通過添加一個模擬“主體”的 div 來使代碼正常作業。所以不是document.addEventListener
我寫的document.getElementById ("container_test"). AddEventListener
。
問題是當沒有 getElement 時它不起作用。我不明白我錯了什么,有人可以幫助我嗎?
這里有兩個例子:
不作業的代碼
var usermenu = document.querySelector(".user_menu_button");
function userMenu() {
var x = document.getElementById("mts_menu");
if (x.classList.toggle("show")) {
usermenu.innerHTML = '<i ></i><span >Account</span>';
} else {
usermenu.innerHTML = '<i ></i><span >Account</span>';
}
}
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>
作業代碼
顯示代碼片段
var usermenu = document.querySelector(".user_menu_button");
function userMenu() {
var x = document.getElementById("mts_menu");
if (x.classList.toggle("show")) {
usermenu.innerHTML = '<i ></i><span >Account</span>';
} else {
usermenu.innerHTML = '<i ></i><span >Account</span>';
}
}
const closing = document.querySelector("#mts_menu");
document.getElementById("container_test").addEventListener("click", (evt) => {
if (!evt.target.closest("#mts_menu")) closing.classList.remove("show");
});
#container_test {
margin-top: 20px;
border: 1px solid;
padding: 20px;
}
/*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>
<div id="container_test">container test</div>
uj5u.com熱心網友回復:
當您單擊按鈕打開選單時,選單被打開,然后事件冒泡到document
. 由于按鈕不在選單內,因此選單關閉。
Yuo 應該event.stopPropagation
在按鈕代碼中使用來防止這種情況。
var usermenu = document.querySelector(".user_menu_button");
function userMenu(event) {
event.stopPropagation();
var x = document.getElementById("mts_menu");
if (x.classList.toggle("show")) {
usermenu.innerHTML = '<i ></i><span >Account</span>';
} else {
usermenu.innerHTML = '<i ></i><span >Account</span>';
}
}
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(event)" 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>
uj5u.com熱心網友回復:
- 在您的“無效代碼”中,您也需要排除顯示選單的按鈕。
document.addEventListener("click", (evt) => {
if (!evt.target.closest("#mts_menu") && !evt.target.closest('.user_menu_button')) closing.classList.remove("show");
});
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/495971.html
標籤:javascript html jQuery css 添加事件监听器
上一篇:如何使用命令讓機器人dm我