将单击处理程序与 CSS 同级选择器组合时 IE 中的奇怪行为答案

【问题标题】：Strange behavior in IE when combining click handler with CSS sibling selector将单击处理程序与 CSS 同级选择器组合时 IE 中的奇怪行为
【发布时间】：2012-03-24 10:30:10
【问题描述】：

我正在尝试设计一个通过单击按钮触发的菜单。当用户单击按钮时，单击处理程序将运行，该处理程序将类添加到按钮，并且使用同级选择器的 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/ 进行测试。

【问题讨论】：

~ 不是相邻兄弟选择器；它是通用的兄弟选择器。相邻兄弟选择器由+ 表示。
@BoltClock，你是对的。我更正了我的帖子。

标签： javascript html css internet-explorer css-selectors

【解决方案1】：

您可以通过强制页面重绘来解决它：

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

见http://jsfiddle.net/uGW4M/

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

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

【讨论】：

className 起作用了。 + 没有。谢谢你。如果我在接下来的几天内没有得到更好的答案，我会接受你的答案。
+ 在这里工作：jsfiddle.net/E7RaA（在 IE9 的 IE7 和 IE8 模式下测试）。
我试过你的小提琴，似乎 + 与它是否有效无关。由于您的 document.body.className 行，它仅适用于 + 。如果我把它拿出来，它就不起作用了。我使用 ~ 而不是 + 因为我不太确定我的菜单的最终设计。
我与+ 相关的部分答案与解决您的问题无关。这只是 By The Way (BTW) 注意。如果您只需要直接兄弟，则不强制浏览器搜索所有兄弟是有意义的。