DOM未调整大小
d1
什么时候
d3
被移除,所以它仍然认为
d1
正在上空盘旋。您需要从中手动删除hover类
d1
什么时候
d3
如果被删除,DOM将识别出
d1
已经缩水了。将此添加到else语句的末尾:
d1.classList.remove("hover");
const d1 = document.getElementById("d1");
const d2 = document.getElementById("d2");
let d3 = null;
function toggle() {
if (!d3) {
d3 = document.createElement("div");
d3.id = "d3";
d1.appendChild(d3);
} else {
d1.removeChild(d3);
d3 = null;
d1.classList.remove("hover");
}
}
d1.addEventListener("mouseover", () => d1.classList.add("hover"));
d1.addEventListener("mouseout", () => d1.classList.remove("hover"));
d1.addEventListener("click", () => toggle());
#d1 { background-color: green; display: inline-block; position: relative; }
#d1.hover { background-color: red; }
#d2 { width: 400px; height: 50px; }
#d3 { position: absolute; width: 400px; height: 300px; background: green; top: 100%; }
<div id="d1">
<div id="d2"></div>
</div>
