我有一個下拉選單。我添加了一個javascript addevent監聽器，當我點擊一個選項時，下拉內容就會關閉。它作業得很好。
Javascript
const element = document. querySelector(".dropdown-content") 。
element.addEventListener("click", () => {
element.style.display ="none"。
});
< div class="dropdown" id ="dropdown" >
<button class="dropbtn"/span> id ="dropbtn"/span> > 選擇拖車< i class="icon ion-location"> </i></button>
< div class="dropdown-content" id ="dropdown-content">/span>
< a class = "drop" id ="drop" href="#"/span>> Option1<br>/span></a>
< a class = "drop"/span> id ="drop" href="#"/span>> 選項2<br></a>/span>
</div>/span>
</div>/span>
css
.dropbtn {
background-color: #F6A695;
color: white;
padding: 16px;
字體大小: 18px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
padding-bottom: 80px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 142px;
box-shadow: 0px 8px 16px 0px rgba（0, 0,0, 0. 2）。)
z-index: 1;
max-height:120px。
overflow-y:滾動。
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd; }
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #F4929D; }
ISSUE:
我面臨的問題是，當下拉內容在點擊時關閉，它不會再次打開，而且它一直保持關閉。
我已經嘗試了什么：
我已經嘗試了將下拉內容在點擊時關閉，并保持關閉。
我試著在再次點擊下拉內容時將顯示方式改為塊狀，但似乎并不奏效。
const element = document. querySelector(".dropdown-content") 。
const mainbutton = document.querySelector（".dropdown"）。
mainbutton.addEventListener("click", () => {
element.style.display ="block"。
});
uj5u.com熱心網友回復：
你可以使用 "mouseenter "和 "mouseleave "事件
。 。const element = document. querySelector(".dropdown-content") 。
const mainbutton = document.querySelector(".dropdown") 。
mainbutton.addEventListener("mouseenter", （）=> {
element.style.display ="block"/span>。
});
mainbutton.addEventListener("mouseleave", () => {
element.style.display ="none"/span>。
});
element.addEventListener("click", () => {
element.style.display ="none"/span>。
}); .dropbtn {
background-color: #F6A695;
color: white;
padding: 16px;
字體大小: 18px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
padding-bottom: 80px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 142px;
box-shadow: 0px 8px 16px 0px rgba（0, 0,0, 0. 2）。)
z-index: 1;
max-height:120px。
overflow-y:滾動。
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd; }
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #F4929D; }< div class="dropdown" id ="dropdown" >
<button class="dropbtn"/span> id ="dropbtn"/span> > 選擇拖車< i class="icon ion-location"> </i></button>
< div class="dropdown-content" id ="dropdown-content">/span>
< a class = "drop" id ="drop" href="#"/span>> Option1<br>/span></a>
< a class = "drop"/span> id ="drop" href="#"/span>> 選項2<br></a>/span>
</div>/span>
</div>/span>uj5u.com熱心網友回復：
Kirill發布的答案是正確的，但要補充的是，當我添加這段代碼時，它完美地作業了
const element = document.querySelector(".dropdown-content") 。
const element2 = document.querySelector(".dropbtn") 。
element2.addEventListener("mouseenter", () => {
element.style.display ="block"。
});
element.addEventListener("click", () => { element.style.display ="block"; };.
element.style.display ="none";
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/331519.html
標籤：