您现在的位置是：网站首页 > <details> ：展开和隐藏内容文章详情

<details> ：展开和隐藏内容

陈川【 HTML 】 10564人已围观

在网页设计中，有时需要创建一个功能，使得页面上的部分内容可以被用户展开或隐藏。这不仅适用于教程、文档中的复杂信息，也适用于用户界面设计，比如菜单选项、配置设置等。<details> 是 HTML5 中的一个元素，专门用于实现这一功能。它结合了 <summary> 和 <section> 两个元素，允许用户通过点击标题来显示或隐藏相关的内容区域。

基本用法

<details> 元素包含两个主要部分：

<summary>：这是用于显示为按钮或标题的元素，用户可以通过点击它来展开或隐藏内容。
<section> 或其他任何元素：这是实际要展示或隐藏的内容区域。

示例代码

下面是一个简单的使用 <details> 的 HTML 示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Details Example</title>
<style>
  summary {
    cursor: pointer;
    padding: 10px;
    background-color: #f0f0f0;
    border: none;
    outline: none;
    font-size: 16px;
  }
  details {
    margin-top: 10px;
  }
  summary::-webkit-details-marker {
    display: none;
  }
</style>
</head>
<body>
  <h1>HTML5 Details Element Example</h1>
  
  <details>
    <summary>Click to show/hide content</summary>
    <p>This is the hidden content that will be shown or hidden based on the user's action.</p>
  </details>

  <h2>Advanced Styling with CSS</h2>
  
  <details open>
    <summary>Content is already expanded</summary>
    <p>When you click here, the content will collapse.</p>
  </details>
  
  <details>
    <summary>Default state</summary>
    <p>This content will be hidden by default and can be revealed by clicking the summary.</p>
  </details>
</body>
</html>

在这个示例中：

我们首先定义了一个基本的 <details> 结构，其中包含 <summary> 标签作为标题和 <section> 标签作为内容区域。
使用内联 CSS 对 <summary> 的外观进行了一些基本的样式定制，包括改变背景色、添加悬停效果以及移除默认的浏览器细节标记。
open 属性用于预设 <details> 的初始状态（展开或隐藏）。
注意，为了兼容不同的浏览器，我们使用 -webkit-details-marker 伪元素来移除某些浏览器（如 Chrome）中的默认箭头。

动态更新与交互

<details> 元素非常适合与 JavaScript 结合使用，以便根据用户的操作动态更新页面内容。例如，你可以添加事件监听器来响应用户点击事件，从而控制内容的展开和隐藏状态。

示例代码（JavaScript）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Details with JavaScript</title>
<style>
  summary {
    cursor: pointer;
    padding: 10px;
    background-color: #f0f0f0;
    border: none;
    outline: none;
    font-size: 16px;
  }
  details {
    margin-top: 10px;
  }
  summary::-webkit-details-marker {
    display: none;
  }
</style>
<script>
  function toggleDetails() {
    this.nextElementSibling.classList.toggle('hidden');
  }

  document.addEventListener('DOMContentLoaded', function() {
    const summaries = document.querySelectorAll('summary');
    summaries.forEach(summary => {
      summary.addEventListener('click', toggleDetails);
    });
  });
</script>
</head>
<body>
  <h1>HTML5 Details Element with JavaScript</h1>
  
  <details>
    <summary>Click to show/hide content</summary>
    <p>This is the hidden content that will be shown or hidden based on the user's action.</p>
  </details>
  
  <details>
    <summary>Default state</summary>
    <p>This content will be hidden by default and can be revealed by clicking the summary.</p>
  </details>
</body>
</html>

在这段代码中：

我们添加了一个 JavaScript 函数 toggleDetails 来处理 <summary> 的点击事件。
当用户点击 <summary> 时，toggleDetails 函数会切换 .hidden 类，从而实现内容的展开与隐藏。

通过结合 HTML5 的 <details> 元素和适当的 CSS 样式以及 JavaScript 逻辑，开发者可以创建出更加互动和用户友好的 Web 页面，提供更好的用户体验。

我的名片

网名：川

职业：前端开发工程师

现居：四川省-成都市

邮箱：chuan@chenchuan.com

站点信息

建站时间：2017-10-06
网站程序：Koa+Vue
本站运行：
文章数量：
总访问量：
微信公众号：扫描二维码，关注我