js文本框的显示与隐藏（二级菜单鼠标悬停显示与离开隐藏）
js文本框的显示与隐藏（二级菜单鼠标悬停显示与离开隐藏）
制作背景当时为了练手，重温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));
}反思与总结
- hidden属性和setTimeout这两个东西不知道，知道了更好的东西，才能有更好的实现思路。
解决：想问题之前需要多查阅文档，直接去搜某个东西网上给出各种乱七八糟的答案，可能不如直接查api准确，更好。
- 箭头表达式 是匿名函数的一种简洁写法
解决：需要多了解js，查阅文档
- 注意避免多余的声明变量 解决：做之前要有好的思路，自己想多声明变量来做的时候先冷静一下，先对编写代码有一个大致思路方向，这个大致思路方向要考虑的全面，然后再开始进行具体实施。做完一遍之后最好要再检查一下变量。
- 注意变量名拼写，如deltaTime，Word和World不分 解决：态度要更好一些，遇到不会的名字搜一搜，不能自己臆想，随便。
