Javascript 禁用详细信息/摘要

当我将新的

details

标记与

summary

组合使用时，我希望禁用生成的输入。我以为

<details open disabled>

我可以做到，但遗憾的是，它不起作用

---

如何禁用details元素？

您可以在

元素上设置一个单击处理程序，防止默认事件行为，而不是使用不存在的

disabled

属性。快速而肮脏的方式是：

<details open onclick="return false">
    <summary>Click here</summary>
    <p>content</p>
</details>

---

要解决您在评论中提到的焦点问题，请将

tabindex=“-1”

添加为

的属性，以防止其获得键盘焦点。请注意，我不确定这是否适用于每个浏览器，并且即使使用该属性，单击时仍会触发

焦点事件。
我想您可以返回false以防止默认行为：

<details open="" onclick="return false;">
<p>Hello</p></details>


你好


点击这里
内容

$（“.mydetails”）。单击（函数（事件）{event.preventDefault（）；}）；
一个非常简单的方法是只使用CSS。如果愿意，您仍然可以使用
disabled
属性或将其设置为
类。当设置为
none
时，声明会使
摘要
标记对鼠标不可见（因此标记下方的元素可以单击）


点击这里
内容

点击这里
内容

详细信息[已禁用]摘要，
详细信息.已禁用摘要{
指针事件：无；/*阻止单击事件*/
}

这解决了一半的问题。遗憾的是，仍然存在工作重点的问题。你是说大纲风格吗？您可以使用
summary:focus{outline:none；}删除该选项​（或一些更具体的选择器）。不，我的意思是它获得键盘焦点。CSS无法解决问题。@LCIDFire您可以尝试
以避免键盘焦点（但单击时仍会触发焦点事件）。请将
选项卡索引
部分添加到您的答案中。另外，它工作正常。这是html5吗？因为我从未在其他html版本中见过这一点。是的，它确实是HTML5。就像总是先在Chrome中实现的一样（稳定，基本上没有错误），它更简单。谢谢你，伙计。你能解释一下你的答案吗？为什么这能解决被问到的问题？是的！不要害怕利用标准属性，即使它们在技术上不适用于元素。
<details open="" onclick="return false;">
<p>Hello</p></details>

<details class="mydetails" open>
<summary>Click here</summary>
<p>content</p></details>

$(".mydetails").click(function(event) {event.preventDefault();});

<details open disabled>
  <summary>click here</summary>
  <p>content</p>
</details>

<details open class="disabled">
  <summary>click here</summary>
  <p>content</p>
</details>

<style>
  details[disabled] summary,
  details.disabled summary {
    pointer-events: none; /* prevents click events */
  }
</style>