制作背景

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

效果动态图

源代码（最初）

/**
 * 实现js控制二级菜单效果
 * by littlefean
 * 2020年10月24日
 */

/**
* 给两个元素绑定事件，一个按钮，一个面板，将这两个元素组成一个二级菜单效果
* @param {*} btn 按钮元素
* @param {*} panel 面板元素
* @author littlefean
*/
function setSecondaryMenu(btn, panel) {
    /**
     * 原理：
     * 鼠标放到按钮上，面板显示出来，鼠标移出按钮，面板延迟消失。
     * 在面板显示出来的基础上鼠标移动到面板上，面板永不消失。
     * 在面板显示出来的基础上鼠标移出面板区域，面板立刻消失。
     */
    /**鼠标移开按钮后面板延迟消失的时间 */
    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));
}

反思与总结

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

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

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

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

3. 注意避免多余的声明变量 解决：做之前要有好的思路，自己想多声明变量来做的时候先冷静一下，先对编写代码有一个大致思路方向，这个大致思路方向要考虑的全面，然后再开始进行具体实施。做完一遍之后最好要再检查一下变量。
4. 注意变量名拼写，如deltaTime，Word和World不分 解决：态度要更好一些，遇到不会的名字搜一搜，不能自己臆想，随便。