javascript - 将点击处理程序与CSS同级选择器组合在一起时，IE中的奇怪行为

我正在尝试设计一个通过单击按钮触发的菜单。用户单击按钮时，将运行单击处理程序，该单击处理程序将向该按钮添加一个类，并且使用同级选择器的CSS规则使菜单可见。它在我测试过的所有浏览器（IE 7和8除外）中均能正常工作。

在IE 7和8中，我遇到了以下问题：

单击该按钮可以切换课程，但是直到我稍微移动一下鼠标，菜单才会出现或消失。
除非我为菜单的子项提供CSS：hover声明，否则该菜单根本无法工作。放到声明中什么都放不放，也放不放任何东西都没有关系，但是没有它，菜单不会显示。

谁能告诉我为什么会这样，我该怎么办？我当时想在菜单中添加一个单独的类，但我想知道是否有更简单的修复程序或解决方法。这是我的代码：

<!DOCTYPE html>
<html><head>
<title>IE selector test</title>
<style type="text/css">
button {
  border: outset 1px #eeeeee;
}
button.active {
  border-style: inset;
}
.menu {
  display: none;
  border: solid 1px #888888;
}
button.active ~ .menu {
  display: block;
}
.menu > :hover {
  /* For some reason, the menu doesn't work at all without this declaration */
}
</style>
</head>
<body>
<button type="button" id="menuButton">Menu</button>
<div class="menu">
  <div>option</div>
</div>
<script>
document.getElementById("menuButton").onclick = function() {
  if (this.className) {
    this.className = "";
  } else {
    this.className = "active";
  }
};
</script>
</body>
</html>

您也可以在http://jsfiddle.net/QKqpn/对其进行测试。

最佳答案

您可以通过强制页面重绘来解决此问题：

document.body.className = document.body.className;

见http://jsfiddle.net/uGW4M/

顺便说一句，在您的情况下，您可以使用+（一个直接同级）组合器，而不是更常见的~（所有后续同级）：

button.active + .menu {/* ... */}

关于javascript - 将点击处理程序与CSS同级选择器组合在一起时，IE中的奇怪行为，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9592275/