为details元素实现jQuery回退

Question

我正在尝试为details元素实现jQuery回退.如果您从未听说过它,它基本上是一个Disclosure小部件.如果存在布尔属性open,则表示将向用户显示摘要和附加信息.如果该属性不存在,则仅显示摘要.以下HTML和CSS实现了这一点.

HTML

<!-- opened -->
<details open>
    <summary>Summary</summary>
    <p>Additional information</p>
</details>

<!-- closed -->
<details>
    <summary>Summary</summary>
    <p>Additional information</p>
</details>

CSS

details summary ~ * {
    display: none;
}

details[open] summary ~ * {
    display: block;
}

然后我添加了以下jQuery来open在summary单击元素时添加/删除属性.

jQuery的

$("summary").click(function() {
    if ($(this).parent().attr("open")) {
        $(this).parent().removeAttr("open");
    } else {
        $(this).parent().attr("open", "open");
    }
});

它会添加和删除open属性,但pChrome中的元素可见性不受影响.我究竟做错了什么？这是一个实例.

更新

• 它适用于Firefox 4.
• manjii指出open应该改为open="open"或者第一次不行.BoltClock还提供了另一种解决方案.但这不是主要问题.
• marcosfromero和BoltClock提出了Chrome动态样式支持的问题,我认为这可能是相关的.

Answer 1

结果发现这是这里报告的一个 WebKit bug 。

错误 21346属性值选择器在属性更改时不会重新评估

添加此空规则将暂时解决我遇到的问题：

details[open] {}

与错误报告中的描述相反，当使用属性选择器后跟后代组合器时，似乎会发生这种情况。

不过，Chrome 12 今天发布了，它原生支持details和summary元素。