document .getElementById("btn2") .addEventListener("mouseover", function openIt2() { var h = document.getElementById("item2").offsetHeight; h += 5; if (h <= 200) { t_open2 = setTimeout(openIt2, 10); document.getElementById("item2").style.height = h + "px"; } });
document .getElementById("btn2") .addEventListener("mouseout", function closeIt2() { var h = document.getElementById("item2").offsetHeight; h -= 5; if (h > 0) { t_close2 = setTimeout(closeIt2, 10); document.getElementById("item2").style.height = h + "px"; } else { document.getElementById("item2").style.height = 0 + "px"; } });
document.getElementById("btn2").addEventListener("mouseover", function () { clearTimeout(t_close2);});
document.getElementById("btn2").addEventListener("mouseout", function () { clearTimeout(t_open2);});//第二个document.getElementById("btn").addEventListener("mouseover", function openIt() { var h = document.getElementById("item").offsetHeight; h += 5; if (h <= 300) { t_open = setTimeout(openIt, 10); document.getElementById("item").style.height = h + "px"; }});
document.getElementById("btn").addEventListener("mouseout", function closeIt() { var h = document.getElementById("item").offsetHeight; h -= 5; if (h > 0) { t_close = setTimeout(closeIt, 10); document.getElementById("item").style.height = h + "px"; } else { document.getElementById("item").style.height = 0 + "px"; }});
document.getElementById("btn").addEventListener("mouseover", function () { clearTimeout(t_close);});
document.getElementById("btn").addEventListener("mouseout", function () { clearTimeout(t_open);});

这是个下拉菜单

此时就显示出了jq的好处

把能复用的地方抽象出来
比如
const addEventListener = (id, event, fn) => document.getElementById(id).addEventListener(event, fn)
然后再去单独写动画效果
const openIt= ...
const closeIt = ...
...
最后在绑上去
addEventListener('btn2', 'mouseover', openIt)
addEventListener(btn2', 'mouseout', closeIt)
...