這是我的代碼筆:https://codepen.io/squishyboots19996/pen/BaoQjPL我正在嘗試創(chuàng)建一個導(dǎo)航菜單,當(dāng)您將鼠標(biāo)懸停在箭頭上時,該菜單會滑入,然后當(dāng)鼠標(biāo)離開菜單時會滑開。我有 UIController.showMenu 和 UIController.closeMenu。如果我在控制臺中調(diào)用其中任何一個,它們就會按預(yù)期工作。但是 closeMenu 的事件偵聽器不起作用。它只是沒有檢測到鼠標(biāo)離開菜單并且沒有關(guān)閉。如果我向函數(shù)添加 console.log("Hello") ,它將在頁面首次加載時觸發(fā)。但當(dāng)我需要它時就不起作用了。應(yīng)用程序.js:var Controller = (function() { UIController.updateNav; setInterval(UIController.moveArrowDown, 3000); //UIController.addBodyMargin(); document.querySelector('#menuArrow').addEventListener("mouseover", UIController.openMenu); document.querySelector('#sideMenu').addEventListener("onmouseleave", UIController.closeMenu);});//-----------------------------------------------------------var UIController = (function() { return { openMenu: (function(){ document.getElementById('sideMenu').style.marginLeft = '0'; document.getElementById('menuArrow').style.marginLeft = '250px'; document.body.style.marginLeft = '25px' }), closeMenu: (function(){ document.getElementById('sideMenu').style.marginLeft = '-250px'; document.getElementById('menuArrow').style.marginLeft = '0'; document.body.style.marginLeft = '0'; }) }})();document.addEventListener('DOMContentLoaded', (event) => { Controller();})導(dǎo)航欄.css:.sidemenu { height: 100vh; width: 250px; position: fixed; top: 0; left: 0; background-color: red; z-index: 5001; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-left: -250px; transition: .5s; cursor: pointer;}.sidemenu ul { list-style: none; padding: 0;}.sidemenu a { text-decoration: none; font-size: 2rem;}.expand-arrow { z-index: 4999; position: fixed; transition: .5s; bottom: 50%;}
2 回答

叮當(dāng)貓咪
TA貢獻(xiàn)1776條經(jīng)驗(yàn) 獲得超12個贊
使用該addEventListener()
方法時,"mouseleave"
不是"onmouseleave"

慕森王
TA貢獻(xiàn)1777條經(jīng)驗(yàn) 獲得超3個贊
添加事件時不應(yīng)使用“on”,只需使用函數(shù)名稱
document.querySelector('#sideMenu').addEventListener("mouseleave", UIController.closeMenu);
代替
document.querySelector('#sideMenu').addEventListener("onmouseleave", UIController.closeMenu);
- 2 回答
- 0 關(guān)注
- 185 瀏覽
添加回答
舉報
0/150
提交
取消