微信公众号 - 下拉（展开/隐藏）

演示

适用于以下浏览器：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>

转载于:https://www.cnblogs.com/cisum/p/9651611.html

微信公众号 - 下拉（展开/隐藏）相关推荐

微信公众号上拉加载下拉刷新
最近再再做一个公众号的项目有需要用到上拉加载,下拉刷新的技术.在网上找了很久,终于找到一个很好用 js 插件,今天我就把这个插件分享给大家,该包可用于App和微信公众号 , 资源下载地址:https: ...
WordPress关注微信公众号获取验证码查看隐藏内容
文章中有介绍到隐藏的内容,需要看到得回复评论才可以看到.最近看到有的博主隐藏内容是需要关注微信公众号,然后回复固定内容获取验证码才填写验证码才可以激活看到隐藏的内容.这个功能是如何实现的呢? ---- ...
微信公众号中如何展开、隐藏内容
在第三方编辑器中,切换到HTML源码编辑模式. 输入以下代码: <details><summary style="text-align: center;"& ...
微信公众号自动拉黑已经取关的用户
公众号是可以把用户加黑名单的,拉黑后用户就不会收到公众号的任何消息. 至于为什么要拉黑用户? 我自己的需求是防止被薅羊毛. 所以花了一点时间,自动拉黑已经取关的用户. 实现主要是基于公众号的API: ...
【解决方案】公安网内网如何通过国标GB28181协议将视频流对接至微信公众号实现在线直播？
我们发现越来越多的人开始用微信做直播,经过调研,我们了解到不仅是由于微信的用户越来越多,更是由于微信直播适应了现在用户终端移动化趋势的情况.采用微信直播,企业可以借助微信生态的优势,进行线上培训和营销 ...
为什么我不在微信公众号上写文章
作者: 陈浩原文: https://coolshell.cn/articles/17391.html 很多朋友问我为什么不在微信公众号上写文章.我都没有直接回答,老实说,我也是扭扭捏捏的,才去开了个 ...
ecshop 小京东微信公众号链接打开，报错appid不能为空，错误码10012
微信公众号链接了商城的地址,在打开时以微信的浏览器打开,其中最麻烦的就是在测试时只能用手机的微信打开(暂时未找到可以直接输入地址的微信浏览器),在测试时会有很多不便,特别是在网站仍在运行的时候. 这里 ...
计算机知识公众号,【计算机教学论文】微信公众号计算机教学系统设计实现(共2580字)...
摘要:现阶段,网络技术得到大范围的普及和应用,并推进智能化手机发展,特别是手机已经成为重要的通信设备,智能手机因其具备的可视化和快捷性等优点,受到人们的青睐.智能化手机中微信重要的APP之一,在社交中 ...
html下拉加载原理,GitHub - gavinjzx/wxPull: 原生JS实现微信公众号或网页使用下拉加载和上拉刷新...
原生JS实现微信公众号或网页使用下拉加载和上拉刷新微信浏览器打开网页显示网址安全信息解决办法,网上很多办法,也找了很久,但是最新的很多用不了. 先看看效果,是不是亲想要的,可以跳过,以免浪费宝贵时间 ...

微信公众号 - 下拉（展开/隐藏）

微信公众号 - 下拉（展开/隐藏）相关推荐

最新文章

热门文章