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

演示

 

 

 

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

 

posted @   Sunsin  阅读(5559)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示