使用 HTML5 新标签 <details> 制作 Accordion 组件（赠送3个相关案例源码）

最新推荐文章于 2024-08-23 09:47:36 发布
最新推荐文章于 2024-08-23 09:47:36 发布
阅读量366 收藏 9
点赞数 3
文章标签： html5 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ed7zgeE9X/article/details/139910065
版权

891d3c5b189f56ceb8ec085ac19a86d6.jpeg

今天，我要和大家分享一个使用 HTML5 新标签 <details> 制作 Accordion（手风琴）组件的源码。通过这个源码，你可以快速掌握如何在网页中实现可折叠的问答列表功能，非常适合用于 FAQ 页面。

案例展示

案例效果，如下图所示：

6595aa8625054164030e25565d46a2f1.gif

了解 <details> 和 <summary> 标签

HTML5 引入了很多新的标签，其中就包括 <details> 和 <summary> 标签。使用这两个标签，我们可以很方便地实现内容的展开和折叠功能。下面我们来详细介绍一下它们的用法。

  • <details>：这个标签用于包裹可折叠的内容。默认情况下，内容是折叠的，用户点击时可以展开。

  • <summary>：这个标签用作 <details> 的标题。点击这个标题可以展开或折叠其后的内容。

HTML 部分

首先，我们来看一下 HTML 部分的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Accordion 01</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" type='text/css'>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="faq-container">
        <details>
            <summary>
                <span class="faq-title">How long does the course take?</span>
                <img src="assets/plus.svg" class="expand-icon" alt="Plus">
            </summary>
            <div class="faq-content">The video content takes more than 4.5 hours. ...</div>
        </details>
        <details>
            <summary>
                <span class="faq-title">Who teaches courses on Atheros Learning?</span>
                <img src="assets/plus.svg" class="expand-icon" alt="Plus">
            </summary>
            <div class="faq-content">The authors of the courses are mostly ...</div>
        </details>
        <!-- 继续添加其他 details 元素 -->
    </div>
    <script src="script.js"></script>
</body>
</html>

在这个 HTML 代码中，我们使用了 <details> 和 <summary> 标签来创建可折叠的问答部分。当用户点击 <summary> 部分时，对应的内容会展开或折叠。每个 <details> 标签包含一个 <summary> 和一个 <div>，用于显示具体的问答内容。

CSS 部分

接下来是 CSS 样式部分，用于美化我们的 Accordion 组件：

html {
    font-size: 16px;
    font-family: "Poppins";
}

body {
    background: white;
    height: 100%;
}

* {
    box-sizing: border-box;
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 12em;
}

details {
    font-size: 1rem;
    margin: 0 auto;
    width: 100%;
    background: #F6FAFF;
    border-radius: 0.5rem;
    position: relative;
    max-width: 600px;
    border: 1px solid #C3DEFF;
    transition: all 0.3s ease-in-out;
}

details:hover {
    border: 1px solid #A4A1FF;
}

summary {
    user-select: none;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    list-style: none;
    padding: 1rem;
    align-items: center;
}

summary:hover .faq-title {
    opacity: 1;
}

summary::-webkit-details-marker {
    display: none;
}

summary:focus {
    outline: none;
}

summary:hover .expand-icon {
    opacity: 1;
}

.faq-title {
    color: #1C2035;
    width: 90%;
    opacity: 0.65;
    transition: all 250ms ease-in-out;
}

.faq-content {
    color: #303651;
    padding: 0.2rem 1rem 1rem 1rem;
    font-weight: 300;
    line-height: 1.5;
}

.expand-icon {
    opacity: 0.65;
    pointer-events: none;
    position: absolute;
    right: 1rem;
    transition: all 150ms ease-out;
}

这些样式定义了 Accordion 组件的外观，包括背景颜色、字体样式、边框、悬停效果等。让我们逐步解析每一个重要的部分：

  • .faq-container：定义了一个容器，用于包裹所有的 FAQ 项。我们使用了 flex 布局来垂直排列这些项，并设置了一个上边距，让内容居中。

  • details：设置了每个 details 标签的样式，包括背景色、边框、圆角和过渡效果。当鼠标悬停时，边框颜色会发生变化。

  • summary：定义了 summary 标签的样式，包括鼠标指针、字体加粗、内部对齐等。还隐藏了默认的 marker（箭头）。

  • .faq-title 和 .faq-content：分别设置了标题和内容的样式，使其更加美观和易读。

  • .expand-icon：设置了图标的样式和过渡效果，使得在展开和折叠时有更好的视觉体验。

前端达人
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery EasyUI Accordion可伸缩面板组件使用详解
10-20
在给定的示例代码中，首先通过<script>标签引入了 jQuery 的核心文件以及 EasyUI 的相关文件，并且还引入了针对中文用户的语言包，以及对应的 CSS 文件，确保 Accordion 组件能够正常工作并且具有中文的界面提示。...
a11y-accordion-tabs:可访问的手风琴标签组件的脚本
05-02
一个小脚本（压缩和gzip压缩后小于1.6 KB），具有零依赖性，用于创建可访问的手风琴标签组件。 基于的。 该组件在较小的屏幕上是手风琴，在较大的视口上切换到选项卡视图。 演示版 。 安装 下载或克隆 下载版本或...
html accordion折叠菜单动态,jQuery EasyUI 布局插件 – Accordion 折叠面板 | 菜鸟教程...
weixin_35816805的博客
06-09 522
jQuery EasyUI 布局插件 - Accordion 折叠面板 jQuery EasyUI 插件通过 $.fn.accordion.defaults 重写默认的 defaults。折叠面板(accordion)允许您提供多个面板(panel)，同时显示一个或多个面板(panel)。每个面板(panel)都有展开和折叠的内建支持。点击面板(panel)头部可展开或折叠面板(panel)主体。...
html右边折叠面板,jquery实现的Accordion折叠面板效果代码
weixin_28756347的博客
05-30 637
本文实例讲述了jquery实现的Accordion折叠面板效果代码。分享给大家供大家参考。具体如下：这是一款Accordion折叠面板，折叠菜单代码，简单Accordion效果，采用CSS与jQuery实现，鼠标点击后展开，再次点击后折叠起来。是网上很常用的手风琴效果。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/x...
HTML5应用中accordion三种效果的探索
weixin_34184158的博客
11-26 622
HTML5应用中accordion三种效果的探索摘要：Accordion（手风琴，又名"抽屉"）效果，因其收展样式形如手风琴而得名。通过层级关系，在信息展示和页面布局上，达到巧妙的平衡。因此，广泛运用于Web以及App交互设计中。在以往的项目中Accordion通常是由JavaScript编码实现。本次分享，着重探索两种不依靠JS，采用纯CSS3或HTML5来实现其效果。并对...
flask html 得到文本框 input的内容_HTML基础知识
weixin_39617252的博客
10-29 3403
什么是HTML？HTML指的是超文本标记语言：Hypertext Markup LanguageHTML不是编程语言，而是一种标记语言标记语言是由标记标签组成的，HTML使用标记标签描述网页HTML文档也称Web文档，包含HTML标签和内容。HTML标签（HTML tag)html标签是由尖括号包围的关键词，如：<p> 通常是成对出现的，如：<p></p>标签对...
Accordion - 简单易用的折叠面板组件
gitblog_00003的博客
03-11 466
Accordion - 简单易用的折叠面板组件 Accordion 是一个轻量级、易于使用的折叠面板组件。它可以帮助您在网页中实现可折叠的内容区域，从而提高页面的可读性和用户体验。 什么是 Accordion？ Accordion 是一个基于 HTML 和 CSS 的折叠面板组件。它允许您将多个段落或元素封装到一组可折叠的面板中，每个面板都可以单独展开和关闭。通过使用 Accordion，您可以节...
基于html5 css3 jquery的手风琴菜单.zip
02-13
在这个"accordion-master"文件中，我们可以期待找到一个使用HTML5语义元素构建的菜单结构，通过CSS3进行美化和交互设计，同时利用jQuery实现动态效果的示例。开发者可能已经创建了一个易于扩展和自定义的模板，以便...
jquery ui制作html5网站游戏.zip
11-19
在本项目中，“jquery ui制作html5网站游戏.zip”是一个包含资源和代码的压缩包，用于教授如何使用jQuery UI库来构建基于HTML5的游戏。这个压缩包可能包含了HTML、CSS、JavaScript文件，以及jQuery UI的相关组件，让...
CSS3 accordion-menu 竖向垂直展开的菜单.rar
07-10
CSS3 accordion-menu 竖向垂直展开的菜单，这种形式的菜单使用传统的CSS技术也是很容易就实现的，不过为了迎合当前的新技术CSS3，而且CSS3在移动设备端有很好的扩展性，因此用CSS3代码重新写了一个简洁的css3 ...
CSS-Accordion:HTMLCSS 手风琴
06-28
CSS-手风琴 HTML/CSS 手风琴 查看此操作，
html5实现窗帘,纯 CSS3 实现的窗帘菜单 Accordion
weixin_30092093的博客
06-28 415
在线演示：http://www.script-tutorials.com/demos/236/index.html1.[文件] source.zip~25KB 下载(208)2.[代码][HTML]代码Tab #1Cascading Style Sheets (CSS) is a style sheet language used to describe the presentatio...
absolute布局
奋斗的蜗牛
10-10 513
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;用户登录界面&lt;/title&gt; &lt;script typt="text/javascript" src=&q
Accordion
BigZong
01-12 548
Accordion time limit per test 3 seconds memory limit per test 256 megabytes input standard input output standard output An accordion is a string (yes, in the real world accordions are musical...
非常好的菜单效果（Accordion风格）
qieyj的专栏
01-11 2344
效果图如下： 代码如下：accordion.js： var stretchers = $$(div.accordion);stretchers.each(function(item)...{    item.setStyles(...{height: 0, overflow: hidden});});window.onload = function().
a标签的href_01.HTML：h p a标签
weixin_39527292的博客
11-27 134
打开工具：=> HBuilderX选择：文件 => 新建 => html文件 => 给html文件起个名字这里我起 index.html ‘index是代表首页的意思’，‘html这里是代表文件的后缀’ 这是新建立好的html文件 => 工具默认创建好了html head body标签h标签：这里从h1----h7标签，代码依次从h1----h7写出来 注意：H1在一...
【前端入门】HTML5全攻略
最新发布
isun1的博客
08-23 1338
HTML指的是超文本标记语言，它是用来描述网页的一种语言。HTML不是一种编程语言，而是一种标记语言。标记语言是一套标记标签。Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是由国际最著名的标准化组织。Web标准的构成（重点）主要包括结构（structure）、表现（presebtation）、行为（Behavior）三个方面。结构用于对网页元素进行整理与分类，现阶段主要学的是HTML。表现用于设置网页元素的版式、颜色、大小等外观样式的设计，主要指CSS。
前端字符串将其分割成长度为 32 的子字符串数组
人与人之间最小的差别是智商，最大的差别是坚持。
08-19 395
要实现这个需求，可以编写一个简单的 JavaScript 函数来处理字符串并将其分割成长度为 32 的子字符串数组。将字符串切割后，对list数据进行数据处理。
将template标签替换为template属性，并使用v-slot指令来命名插槽，例如： <el-collapse accordion class="filter-div-row"> <el-collapse-item v-slot:item1="{title}"> <template #title> 一致性 Consistency<i class="header-icon el-icon-info"></i> </template> <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div> <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div> </el-collapse-item> <el-collapse-item v-slot:item2="{title}"> <template #title> 反馈 Feedback </template> <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div> <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div> </el-collapse-item> <el-collapse-item v-slot:item3="{title}"> <template #title> 效率 Efficiency </template> <div>简化流程：设计简洁直观的操作流程；</div> <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div> <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div> </el-collapse-item> <el-collapse-item v-slot:item4="{title}"> <template #title> 可控 Controllability </template> <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div> <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div> </el-collapse-item> </el-collapse> 不对
05-26
抱歉，我之前的回答有误，template标签不能直接替换为template属性。正确的做法是使用v-slot指令来命名插槽，例如： ``` <el-collapse accordion class="filter-div-row"> <el-collapse-item v-slot:item1="{title}"> <template #title> <span>一致性 Consistency<i class="header-icon el-icon-info"></i></span> </template> <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div> <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div> </el-collapse-item> <el-collapse-item v-slot:item2="{title}"> <template #title> <span>反馈 Feedback</span> </template> <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div> <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div> </el-collapse-item> <el-collapse-item v-slot:item3="{title}"> <template #title> <span>效率 Efficiency</span> </template> <div>简化流程：设计简洁直观的操作流程；</div> <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div> <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div> </el-collapse-item> <el-collapse-item v-slot:item4="{title}"> <template #title> <span>可控 Controllability</span> </template> <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div> <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div> </el-collapse-item> </el-collapse> ``` 在这里，我们使用v-slot指令来将每个插槽命名为item1、item2、item3和item4，并在每个插槽内部使用template标签来定义子组件的内容。在template标签内部，我们使用#title来指定当前模板是用于渲染标题的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值