jquery - 为 details 元素实现 jQuery 回退

Question

我正在尝试为 details 实现 jQuery 回退元素。如果您从未听说过它，它基本上是一个 Disclosure widget .如果 bool 属性 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 以在单击 summary 元素时添加/删除 open 属性。

jQuery

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

它添加和删除了 open 属性，但是 p 元素的可见性在 Chrome 中不受影响。我究竟做错了什么？这是一个 live example .

更新

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

Answer 1

原来是报告的WebKit bug here .

Bug 21346 attribute value selector not being reevaluated upon attribute change

添加这个空规则将暂时解决我遇到的问题:

details[open] {}

与错误报告中的描述相反，它似乎发生在使用属性选择器后跟后代组合器时。

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