Details open 属性

在 Web 开发中，我们经常需要创建可折叠的内容块，以便用户可以展开或收起特定部分的信息。HTML5 中的 <details> 元素就是为此而设计的，而 open 属性则用于控制这个内容块是否默认展开。

什么是 <details> 元素

<details> 元素是一个可以包含可见或隐藏信息的容器元素。它包含一个包裹在其中的 <summary> 元素，用于显示标题或概要，以及一些内容，这些内容可以被用户展开或收起。

<details>
  <summary>点击展开/收起</summary>
  <p>这里是一些可以展开或收起的内容。</p>
</details>

在浏览器中呈现的效果如下：

这里是一些可以展开或收起的内容。

使用 open 属性

open 属性是一个布尔属性，用于指定 <details> 元素是否默认展开。当该属性存在时，内容块会默认展开；当该属性不存在时，内容块会默认收起。

// www.javascriptcn.com code example
<details open>
  <summary>默认展开的内容块</summary>
  <p>这个内容块会默认展开。</p>
</details>

<details>
  <summary>默认收起的内容块</summary>
  <p>这个内容块会默认收起。</p>
</details>

在浏览器中呈现的效果如下：

这个内容块会默认展开。

这个内容块会默认收起。

使用 JavaScript 动态控制 open 属性

除了静态地在 HTML 中设置 open 属性外，我们还可以使用 JavaScript 动态地控制 <details> 元素的展开和收起。

// www.javascriptcn.com code example
<details id="myDetails">
  <summary>点击按钮控制展开/收起</summary>
  <p>这里是可以动态控制的内容块。</p>
</details>

<button onclick="toggleDetails()">点击我控制</button>

<script>
  function toggleDetails() {
    var details = document.getElementById('myDetails');
    details.open = !details.open;
  }
</script>

点击按钮后，内容块会展开或收起。

结语

通过 <details> 元素和 open 属性，我们可以轻松地创建具有可折叠功能的内容块，为用户提供更好的交互体验。同时，结合 JavaScript 动态控制 open 属性，我们可以实现更加灵活的展开和收起效果。希望本文能帮助你更好地应用 details 和 open 属性在你的 Web 开发项目中。