javascript - 禁用详细信息/摘要

Question

当我将新的 details 标签与 summary 结合使用时，我想禁用生成的输入。我以为

<details open disabled>

可以解决这个问题，但遗憾的是它不起作用。

如何禁用细节元素？

Answer 1

一个非常简单的方法是只使用 CSS。如果您愿意，您仍然可以使用 disabled 属性或将其设为 class。 pointer-events设置为 none 时的声明使 summary 标签对鼠标不可见(标签下方的元素因此可以点击。) 添加了 tabindex="-1" 到 summary 标签，用于禁用的标签，以消除键盘焦点。

<details open disabled>
  <summary tabindex="-1">click here: [disabled]</summary>
  <p>content</p>
</details>

<details open class="disabled">
  <summary tabindex="-1">click here: .disabled</summary>
  <p>content</p>
</details>

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

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

https://codepen.io/joelnagy/pen/MWKNGGp