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”时，{{1}回到开头（由于样式表，这是一个高度和宽度为48px的div）。问题在于#plus没有做好工作。当您单击hideNav()时，#plus函数被成功触发，但在此之后，当您单击“X”并且hideNav（）被触发（也成功）时，应该应用初始样式，但是任何东西。我已经测试过应用showNav()之类的其他CSS项目并且运行正常，但不适用于background-color和width。

我认为问题在于我无法覆盖height

所应用的样式

我该怎么办？

Answer 1

问题是当您点击X时，事件正在冒泡到#plus div。您可以通过以下方式阻止此操作：

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
}

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

1 个答案: