Question

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

<details open disabled>

可以做到这一点，但遗憾的是它不起作用。

如何禁用详细信息元素？

Answer 1

您可以在disabled元素上设置单击处理程序，而不是使用不存在的<details>属性，并从那里阻止默认事件行为。快速而肮脏的方式是：

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

正确的方法是使用addEventListener：

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

<script>
document.getElementById('mydetails').addEventListener('click', function(e) {
    e.preventDefault();
});
</script>

http://jsfiddle.net/L8HUZ/1/

要解决您在评论中提到的焦点问题，请添加tabindex="-1"作为<summary>的属性，以防止它获得键盘焦点。请注意，我不确定这是否适用于所有浏览器，并且即使使用该属性，仍会在点击时触发focus事件。

Answer 2

我猜你可以返回false以防止默认行为：

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

Answer 3

一种非常简单的方法是仅使用CSS。如果愿意，您仍然可以使用disabled属性或将其设为class。 pointer-events声明设置为none时，summary标签对鼠标不可见（因此，该标签下方的元素可以单击。）

<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>

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

Answer 4

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

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

禁用详细信息/摘要

4 个答案: