-下拉（展开隐藏）
演⽰
适⽤于以下浏览器：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/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4x
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>
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
svg如何复制到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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。