1

好的，这是我的 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，它会展开显示一些内容，并在里面出现一个“X”，#plus-ex当你点击那个“X”时，#plus回到开始（即一个高度为48px的div和宽度感谢样式表）。这样做的问题在于，hideNav()它没有做好工作。当您单击时#plus，showNav()函数会成功触发，但之后，当您单击“X”并触发 hideNav() 时（也成功），应该应用初始样式，但会执行任何操作。我已经测试过应用另一个 CSS 属性，比如background-colorand 可以正常工作，但不能使用widthand height。

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

我应该怎么办？

4

1 回答 1

4

问题是当您单击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
}
于 2013-08-18T04:59:22.873 回答