Javascript-覆盖先前在另一个函数中声明的样式

Question

好的，这是我的HTML

<div id="plus" style="margin-left: 10px; margin-top: 303px;">
      <div id="plus-back"> </div>
      <div id="plus-ex"> X </div>
</div>

注意：#plus元素的内联样式是由另一个脚本预先声明的

这是我的JS

document.getElementById("plus").onclick = showNav 
document.getElementById("plus-ex").onclick = hideNav
function showNav(){
    this.style.width="200px"
    this.style.height="200px"
    document.getElementById("plus-ex").style.display="block"
}
function hideNav(){
    document.getElementById("plus").style.width="48px"
    document.getElementById("plus").style.height="48px"
}

嗯。。这就是我所拥有的。目标很简单，当您单击#plus时，它会被展开以显示一些内容，并在#plus-ex内部显示一个"X"，当您点击该"X"时，#plus会返回到起点（由于样式表，这是一个高度和宽度为48px的div）。问题是hideNav()做得不好。当您单击#plus时，showNav()函数会被成功激发，但在那之后，当您单击"X"并且hideNav（）也会被激发（成功）时，它应该应用初始样式，但不会执行任何操作。我已经测试了应用另一种CSS特性，如background-color，并且工作正常，但不适用于width和height。

我认为问题是我无法覆盖showNav() 应用的样式

我该怎么办？

Answer 1

问题是当您单击X时，事件会冒泡到#plusdiv。您可以通过调用：来防止这种情况

event.stopPropagation();

按如下方式更新您的代码并尝试一下：

document.getElementById("plus").onclick = showNav 
document.getElementById("plus-ex").onclick = hideNav
function showNav(){
    this.style.width="200px"
    this.style.height="200px"
    document.getElementById("plus-ex").style.display="block" // Don't need this line as it's a block element i.e. already a div
    event.stopPropagation(); // add this line
}
function hideNav(){
    document.getElementById("plus").style.width="48px"
    document.getElementById("plus").style.height="48px"
    event.stopPropagation(); // add this line
}