我正在嘗試為我的下拉大型選單制作影片，但我遇到了一個問題，它僅在我將滑鼠懸停在定制器按鈕上時才有效，緩慢。我不知道為什么。有更多 JavaScript 經驗的人可以幫助我嗎？這是我的 JavaScript 代碼，完整代碼（html，scss）可以在這里找到（codepen 鏈接）：
const button = document.querySelector(".dropdown");
button.addEventListener("mouseenter", (e) => {
document
.querySelector(".dropdown-content")
.classList.toggle("scale-up-ver-top");
});
uj5u.com熱心網友回復：
你可以做兩件事來讓它作業。
首先，document.querySelector()只回傳一個元素，這回答了為什么只有定制器按鈕有效。要解決此問題，您需要使用document.querySelectorAll(".dropdown").
其次，在事件偵聽器中，我知道您要選擇".dropdown-content"懸停的下拉串列。但document.querySelector(".dropdown-content")只會簡單地選擇 DOM 中的所有下拉內容。要解決此問題，您需要替換document為當前的下拉元素。
這是我從您的 codepen 重寫的完整腳本：
// select all dropdown buttons
const buttons = document.querySelectorAll(".dropdown");
// loop through each button
buttons.forEach(button => {
button.addEventListener("mouseenter", e => {
// e.target => the one that you're hovering
e.target
.querySelector(".dropdown-content")
.classList.toggle("scale-up-ver-top");
});
});
在這個codepen查看它，我還添加了一個 mouseleave 事件。
uj5u.com熱心網友回復：
document.querySelector(".dropdown")dropdown僅回傳與該類一起找到的第一個元素。您需要querySelectorAll, 然后您需要遍歷所有元素并為每個元素添加一個 mouseenter 偵聽器。
uj5u.com熱心網友回復：
如果你提到你必須切換兩次，它會起作用，因為你設定了classList.toggle這意味著第一次，它會將"scale-up-ver-top"類添加到元素中，第二次它會找到舊的"scale-up-ver-top"，它會洗掉它一個可能的解決方案是添加(toggle, true)，這意味著它只會向元素添加類。
const button = document.querySelector(".dropdown");
button.addEventListener("mouseenter", (e) => {
document
.querySelector(".dropdown-content")
.classList.toggle("scale-up-ver-top", true);
如果您是指問題，您想分配所有按鈕，請使用：
const button = document.querySelectorAll(".dropdown");
button.forEach(item =>{
item.addEventListener("mouseenter", (e) => {
document
.querySelector(".dropdown-content")
.classList.toggle("scale-up-ver-top");
document
.querySelector(".dropdown-content")
.classList.toggle("scale-up-ver-top");
});
})
uj5u.com熱心網友回復：
如果你意識到這一點，你必須去 2 次所以課程切換，我認為這門課應該只在懸停時，不是嗎？
所以洗掉js，并scale-up-ver-top直接.dropdown-content在HTML中添加
編輯
以mouseenter添加此功能，以便在滑鼠離開元素時洗掉該類，因此它將如下所示：
const button = document.querySelector(".dropdown");
button.addEventListener("mouseenter", (e) => {
document
.querySelector(".dropdown-content")
.classList.toggle("scale-up-ver-top");
});
button.addEventListener("mouseleave", (e) => {
document
.querySelector(".dropdown-content")
.classList.toggle("scale-up-ver-top");
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/419629.html
標籤：
上一篇：在display=none之后保持HTML表格中的寬度和/或文本對齊方式
下一篇：如何打造凹弧形側邊欄？