使用HTML5 details,summary实现，展开，下拉，树的效果
2024-06-30 22:24:38
1-展开效果
HTML
<details class="details-2" open><summary tabindex="-1"><a href="javascript:">这是示例</a></summary><content>本案例隐藏原生小三角，使用自定义小三角。</content></details>
CSS
.details-2 ::-webkit-details-marker {display: none;}.details-2 ::-moz-list-bullet {font-size: 0;}.details-2 summary {padding: 5px;background-color: #f0f0f0;}.details-2 content {display: block;padding: 5px;background-color: #f5f7f7;}/* 自定义的三角 */.details-2 summary::after {content: '';position: absolute;width: 1em; height: 1em;margin: .2em 0 0 .5ch;background: url(./arrow-on.svg) no-repeat;background-size: 100% 100%;transition: transform .2s;}.details-2:not([open]) summary::after {margin-top: .25em;transform: rotate(90deg); }summary {user-select: none;outline: 0;}summary a {color: inherit;}
2-“更多”展开与收起效果
CSS代码：
::-webkit-details-marker {display: none;}::-moz-list-bullet {font-size: 0;float: left;}summary {user-select: none;outline: 0;}.more {display: none;}[open] .more {display: block;}[open] summary a {font-size: 0;}[open] summary a::before {content: '收起';font-size: 14px;}
HTML代码：
<details><summary><p>据台媒报道，大...青睐。</p><div class="more"><p>其他几首歌曲...</p></div><a>更多</a></summary> </details>
3-自定义下拉框等效果
CSS代码：
/* 隐藏默认三角 */::-webkit-details-marker {display: none;}::-moz-list-bullet {font-size: 0;float: left;}summary {display: inline-block;padding: 5px 28px;text-indent: -15px;user-select: none;position: relative;z-index: 1;}summary::after {content: '';position: absolute;width: 12px; height: 12px;margin: 4px 0 0 .5ch;background: url(./arrow-on.svg) no-repeat;background-size: 100% 100%;transition: transform .2s;}[open] summary,summary:hover {background-color: #fff;box-shadow: inset 1px 0 #ddd, inset -1px 0 #ddd;}[open] summary::after {transform: rotate(180deg);}.box {position: absolute;border: 1px solid #ddd;background-color: #fff;min-width: 100px;padding: 5px 0;margin-top: -1px;}.box a {display: block;padding: 5px 10px;color: inherit;}.box a:hover {background-color: #f0f0f0;}.box sup {position: absolute;color: #cd0000;font-size: 12px;margin-top: -.25em;}
HTML代码：
<div class="bar"><details><summary>我的消息</summary> <div class="box"><a href>我的回答<sup>12</sup></a><a href>我的私信</a><a href>未评价订单<sup>2</sup></a><a href>我的关注</a></div></details></div><p>这里放一段文字表明上面的是悬浮效果。</p>
4-带slideUp/slideDown效果的多项折叠菜单
CSS
/* 隐藏默认三角 */::-webkit-details-marker {display: none;}::-moz-list-bullet {font-size: 0;float: left;}summary {user-select: none;outline: 0;}summary::after {content: '';position: absolute;width: 12px; height: 12px;margin: 4px 0 0 .5ch;background: url(./arrow-on.svg) no-repeat;background-size: 100% 100%;transition: transform .2s;}[open] summary::after {transform: rotate(90deg);}/* 动画效果 */details + dl {max-height: 0;transition: max-height .25s;margin: 0 0 1rem;overflow: hidden;}[open] + dl {max-height: 100px;}
HTML代码：
<details open><summary>订单中心</summary></details><dl><dd><a href>我的订单</a></dd><dd><a href>我的活动</a></dd><dd><a href>评价晒单</a></dd><dd><a href>购物助手</a></dd></dl><details open><summary>关注中心</summary></details><dl><dd><a href>关注的商品</a></dd><dd><a href>关注的店铺</a></dd><dd><a href>关注的专辑</a></dd><dd><a href>收藏的内容</a></dd></dl><details open><summary>资产中心</summary></details><dl><dd><a href>余额</a></dd><dd><a href>优惠券</a></dd><dd><a href>礼品卡</a></dd></dl>
原文地址：http://www.zhangxinxu.com/wordpress/2018/01/html5-details-summary-no-js-ux/
使用HTML5 details,summary实现，展开，下拉，树的效果相关推荐
- xm-select下拉框，下拉树
使用案例 先上图 layui中使用xm-select下拉选择树 1.引入js <script src="../static/res/bootstrap/js/jquery-3.4.1. ...
- html5级联菜单,h5级联下拉、分类筛选
级联下拉列表框这种常见的需求,相信大家都经常遇到,下面两种写法都曾运用在项目,测试是没问题,但代码可能不是最好的,亲如果有更好的建议,请留言给我哦-一起探讨 注:数据若为 省市 数据,可利用省市联动的 ...
- 使用HTML5和JS实现日期下拉框功能
使用HTML5和JS实现日期下拉框功能 如图所示: 代码如下: <center><span style="font-size:26pt;color:red;"&g ...
- html表单下拉美化教程,html5和css3炫酷select下拉菜单美化效果
html5和css3炫酷select下拉菜单美化效果 发布日期:2015-10-20 11:11 来源: 标签: 网页技术 CSS教程 html5+css3 select下拉菜单美化 这是一款使用ht ...
- 带线的无限级下拉树列表-完整示例篇
2019独角兽企业重金招聘Python工程师标准>>> 前言: 今天在群里有人问起了我一个比较远古的问题:带线的无限级下拉树列表他运行不起来. 最关键的又扯上了CYQ.Data 框架 ...
- extjs tree下拉列表_使用ztree来代替Extjs的下拉树
[Struts2+Spring2.5+Hibernate3(JPA)+ExtJS3基本后台 将ExtJS替换为3..2版本后发现下拉数有些异常:之前展开下来树的下级节点时,下拉菜单不会关掉.但是在3. ...
- dtree渲染下拉树，layui集成dtree，dtree渲染下拉框
文档位置 dtree官方文档地址链接 渲染下拉树js dTreeUtil.js /**** @param id 要渲染的dom* @param data 数据* @param none 无数据时显示 ...
- layui.dtree下拉树踩坑
提示:针对dtree版本v2.5.7 文章目录 前言-下拉树实现描述 一.单击选中bug 二.使用reload()重新加载数据(data方式) 三.实现reload,严格控制reload在init后, ...
- dtree.js下拉树控件
dtree下拉树的一些基础用法 id Number 唯一的id pid Number 判定父节点的数字,根节点的值为 -1 name String 节点的文本标签 url String ...
最新文章
- Leangoo敏捷项目管理软件 6.3.2
- Android 5.x Theme 与 ToolBar 实战
- 学计算机有哪些大学专业,计算机专业：最好的7所大学！也是全中国“最难考”的大学！...
- 验证码加减乘PHP,使用php实现加减法验证码
- 面试题-ASP 与 ASP.Net的区别？
- 前端笔记-JavaScript中放json数组要注意的地方（构造灵活的echarts）
- 值得借鉴：360推荐系统架构演进
- win8 开发之旅(3) --五子棋游戏开发 前奏
- 数据载入过慢？这里有一份TensorFlow加速指南
- vue 高德轨迹自定义两点之间的颜色_vue 还是 react？这是一个问题
- Learning a Discriminative Feature Network for Semantic Segmentation（语义分割DFN，区别特征网络）...
- NotePad 常用设置
- 对比起来学习前端三大框架（持续更新）
- 睡眠多少分钟一个循环_睡眠分多少阶段
- windows安装配置jdk1.8
- 量化交易接口UFX是什么？
- Server responded “Algorithm negotiation failed“错误解决方法
- 聚焦新能源与汽车科技 全球汽车发展趋势论坛举办
- Netfilter学习之NAT类型动态配置（二）NAT类型介绍及MASQUERADE用户层的实现
- UiBot 邮件群发