为details元素实现jQuery回退

我正在尝试为元素实现jQuery回退。如果你从来没有听说过，这基本上是一个错误。如果存在布尔属性

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>

然后，我添加了以下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中的可见性不受影响。我做错了什么？这是一本书

更新

• 它在Firefox4中工作
• 指出应将

  open

  更改为

  open=“open”

  ，否则第一次将不起作用。还提供了另一种解决方案。但这不是主要问题
• 并提出了Chrome的动态风格支持的问题，我认为这可能是相关的

---

它不是第一次起作用，因为：

<details open>

---

至少在Chrome中，问题不在于jQuery代码，而在于Chrome对CSS选择器的支持

如果调试jQuery代码，它会工作，但是CSS并没有按预期应用

使用“调试控制台”检查原始代码的这一分支：

---

结果是报告了一个WebKit错误

错误21346属性值选择器 未根据属性重新评估 改变

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

details[open] {}

与bug报告中的描述相反，在使用属性选择器和后代组合器时，似乎会出现这种情况

---

然而，Chrome 12今天发布了，它对

详细信息

和

摘要

元素具有本机支持

在Safari中，您需要将evt.preventDefault（）添加到单击处理程序中，否则它也会触发本机行为，将其返回到单击之前的状态（奇怪的是，这在Chrome中似乎没有发生）

添加Mozilla Firefox支持

总结
附加信息

var ischrome=假；
if（/chrom（e | ium）/.test（navigator.userAgent.toLowerCase（）））{
变色=真；
}
$detail=$（“#detail”）；
$detail.hide（）；
如果（！异色）{
$（'summary'）。前置（'summary'）► ');                     
}
$（'summary'）。在（'click'，函数（e）上{
如果（$detail.is（“：visible”））{
$（'summary'）.html（'► 总结);；
$detail.hide（）；
}否则{
$（'summary'）.html（'▼ 总结);；
$detail.show（）；
}
});                     

我用它来让它在所有不受支持的浏览器上工作。它不需要也不使用jQuery，但是如果你愿意，你可以用jQuery来增强它（它只是简单的JS）

以下是正在实施的解决方案：

详细信息摘要{display:block；}
详情摘要~*{
显示：无；
}
详细信息[打开]摘要~*{
显示：块；
}

{{item.title}
{{item.content}

再次单击时，

p

的可见性确实会发生变化，因此它只在第一次单击时被破坏。@BoltClock它在Firefox 4中会发生变化，但在Chrome中不会发生变化。我编辑了这个问题来指出这一点。或者，

if（typeof$（this）.parent（）.attr（“open”）！=“undefined”）

谢谢你指出这一点，但这不是主要问题。@BoltClock我试过了，但在FF4或Chrome中没有真正起作用。我想你可能没有使用jQuery 1.6。@BoltClock我又试了一次，你是对的。我第一次肯定做错了什么。我知道它正确地添加和删除了

open

属性，b但是CSS最初是按照您所看到的意图应用的。第一个

详细信息
元素被打开，而第二个元素被关闭。WebKit似乎在
~
和动态样式方面有问题。@BoltClock
~
不是问题，因为如果您用
+
替换它，它仍然不起作用。我非常肯定它有一个问题禁止重复答案的策略。为什么一个非常相似的答案会离线？我认为这个策略只适用于（并且设计用于）指向第三方的链接，但我可能错了。更新：我已经在答案中添加了解决方案。
<details open="open">

details[open] {}

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

<details>
<summary>Summary</summary>
<p id="detail">Additional information</p>
</details>


<script>
var ischrome = false;
if(/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){
    ischrome = true;
    }

$detail = $('#detail');
$detail.hide();
if(!ischrome){
    $('summary').prepend('► ');                     
}
$('summary').on('click', function(e){
    if ($detail.is(":visible")){
        $('summary').html('► summary');
        $detail.hide();                                 
    }else{              
        $('summary').html('▼ summary');             
        $detail.show(); 
    }
});                     
</script>