微信公众号 - 下拉(展开/隐藏)
演示
适用于以下浏览器:Chrome、Safari
1.控制黑三角通过以下伪元素做到
2. 控制黑三角也是以下元素的图标
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <style>
10 body {
11 margin: 0;
12 }
13
14 summary {
15 text-align: left;
16 outline: none;
17 padding: 3%;
18 background-color: #ddd;
19 position: relative;
20 }
21
22 .details summary::after {
23 content: '';
24 position: absolute;
25 top: 30%;
26 right: 3%;
27 width: 1em;
28 height: 1em;
29 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTM3NTIyNTIwNjYwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE2NTQiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNODgwLjEwMTc1OSA5NDUuNDg5OTAyYzE4LjAyMDE1NSAxNy44MTk4NTQgNDcuMTQzNjQ5IDE3LjgxOTg1NCA2NS4wOTcyODYgMCAxNy45NTM2MzctMTcuNzUzMzM5IDE3Ljk1MzYzNy00Ni42MTA1NzQgMC02NC40Mjk0MDVMNTQ0LjA0MjA4NSA0ODUuMTA2NDljLTE4LjAyMDE1NS0xNy44MTk4NTQtNDcuMDc3MTMxLTE3LjgxOTg1NC02NS4wOTcyODYgMEw3Ny43ODc4MzkgODgxLjA1OTQ3NGMtMTcuOTUzNjM3IDE3LjgxOTg1NC0xOC4wMjAxNTUgNDYuNjEwNTc0IDAgNjQuNDI5NDA1czQ3LjIxMDE2NiAxNy44MTk4NTQgNjUuMDk3Mjg2IDAuMDY2NTE1bDM2OC42NDEwNjQtMzUwLjE0MTYxMkw4ODAuMTAxNzU5IDk0NS40ODk5MDIgODgwLjEwMTc1OSA5NDUuNDg5OTAyeiIgcC1pZD0iMTY1NSIgZmlsbD0iIzcwNzA3MCI+PC9wYXRoPjwvc3ZnPg==');
30 background-repeat: no-repeat;
31 background-size: 100%;
32 transition: transform .2s;
33 }
34
35 .details:not([open]) summary::after {
36 transform: rotate(90deg);
37 }
38
39 .details ::-webkit-details-marker {
40 display: none;
41 }
42
43 .details ::-moz-list-bullet {
44 font-size: 0;
45 }
46 </style>
47 </head>
48
49 <body>
50 <details class="details">
51 <summary>显示/隐藏</summary>
52 <p>这里是你所需要隐藏的内容</p>
53 <p>这里是你所需要隐藏的内容</p>
54 <p>这里是你所需要隐藏的内容</p>
55 <p>这里是你所需要隐藏的内容</p>
56 <p>这里是你所需要隐藏的内容</p>
57 </details>
58 </body>
59
60 </html>
base64图片再次减少体积:https://www.cnblogs.com/cisum/p/7754910.html
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <style>
10 summary {
11 text-align: left;
12 outline: none;
13 padding: 3%;
14 background-color: #ddd;
15 position: relative;
16 }
17
18 details summary::-webkit-details-marker {
19 position: absolute;
20 right: 0;
21 top: 35%;
22 }
23 </style>
24 </head>
25
26 <body>
27 <details>
28 <summary>点击展开/隐藏</summary>
29 <p>这里是你所需要隐藏的内容</p>
30 <p>这里是你所需要隐藏的内容</p>
31 <p>这里是你所需要隐藏的内容</p>
32 <p>这里是你所需要隐藏的内容</p>
33 <p>这里是你所需要隐藏的内容</p>
34 </details>
35 </body>
36
37 </html>
分类:
2018 - 微信公众号
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现