js 二级菜单鼠标悬停显示与离开隐藏

js 二级菜单鼠标悬停显示与离开隐藏（2020年10月24日）

当时为了练手，重温html和css语法，在仿写百度界面的网页，同时学习了一些js的基础，打算将百度网页中的二级菜单鼠标事件效果也做出来。于是就做了这样一个js。其实我个人并不知道百度二级菜单是怎样实现的，我只是用我想的方式来实现。

效果动态图

* 鼠标放到按钮上，面板显示出来，鼠标移出按钮，面板延迟消失。 * 在面板显示出来的基础上鼠标移动到面板上，面板永不消失。 * 在面板显示出来的基础上鼠标移出面板区域，面板立刻消失。 /**鼠标移开按钮后面板延迟消失的时间 */ var derTaTime = 0.3; /**面板元素是否显示了出来 */ var isPanelShow = false; /**鼠标是否在两个元素之外 */ var isMouseOut = true; /**此时间将一直增加 */ var time = 0; /**移出按钮的时刻 */ var tOutBtn = time; /**移入面板的时刻 */ var tInPanel = time; //开启一个时时刻刻增加秒数的计时器 setInterval(function () { time += 0.1; console.log("now:" + time); console.log("out:" + tOutBtn); console.log("in:" + tInPanel); if (time - tOutBtn > derTaTime && isMouseOut) { panel.style.opacity = 0; }, 100); /**鼠标移入按钮 */ btn.onmouseover = function () { isPanelShow = true; isMouseOut = false; panel.style.opacity = 1; /**鼠标移出按钮 */ btn.onmouseleave = function () { isMouseOut = true; panel.style.opacity = 1; tOutBtn = time; /**鼠标移入面板 */ panel.onmouseover = function () { isMouseOut = false; tInPanel = time; //在移入面板前先进行判断，如果是在规定的时间差值内移入，则能够将面板显示出来 if (tInPanel - tOutBtn < derTaTime) { panel.style.opacity = 1; /**鼠标移出面板 */ panel.onmouseleave = function () { isMouseOut = true; panel.style.opacity = 0; isPanelShow = false;

源代码（后）

声明 ：此代码为好友Rutubet所更改，相比以前的代码逻辑更加清晰，更加简洁。我也因此get到很多东西。在此十分感谢Rutubet。

* 给两个元素绑定事件，一个按钮，一个面板，将这两个元素组成一个二级菜单效果 * @param {*} btn 按钮元素 * @param {*} panel 面板元素 * @param {*} dt 毫秒(ms) * @author littlefean, rutubet function setSecondaryMenu(btn, panel, dt) { * 原理： * 鼠标放到按钮上，面板显示出来，鼠标移出按钮，面板延迟dt毫秒消失。 * 鼠标移出后，面板消失之前，移动到面板上，取消面板的延迟消失 * 鼠标移出面板后，同样延时dt毫秒消失 /**鼠标移开按钮后面板延迟消失的时间(ms) */ var delayTask; /**鼠标移入按钮 */ btn.addEventListener("mouseover", () => panel.hidden = false); /**鼠标移出按钮 */ btn.addEventListener("mouseleave", () => delayTask = setTimeout(() => panel.hidden = true, dt)); /**鼠标移入面板 */ panel.addEventListener("mouseover", () => clearTimeout(delayTask)); /**鼠标移出面板 */ panel.addEventListener("mouseleave", () => delayTask = setTimeout(() => panel.hidden = true, dt));

反思与总结

  • hidden属性和setTimeout这两个东西不知道，知道了更好的东西，才能有更好的实现思路。

    • 解决：想问题之前需要多查阅文档，直接去搜某个东西网上给出各种乱七八糟的答案，可能不如直接查api准确，更好。

  • 箭头表达式 是匿名函数的一种简洁写法

    • 解决：需要多了解js，查阅文档