原生HTML的<details>折叠面板

yycvip

借助HTML5的<details>标签，开发者可以不借助JavaScript或其他语言就实现原生的折叠面板。CSS则可以进一步美化外观，并且这一方案具有良好的性能和兼容性。

效果演示


HTML

1. <h1>Accordion with <code>&lt;details&gt;</code> element</h1>
   
2. <p>Making the native <abbr>HTML</abbr> <code>&lt;details&gt;</code> element behave like a typical collapsible accordion with smooth animations.</p>
   
3. 
   
4. <p><input type="checkbox" id="accordion-toggle"><label for="accordion-toggle">Keep animations but remove auto-collapse effect </label></p>
   
5. 
   
6. <div class="container collapse">
   
7.   <details>
   
8.     <summary>Accordion heading 1</summary>
   
9.     <div class="details-wrapper">
   
10.       <div class="details-styling">        
    
11.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis fuga saepe sunt delectus, quo assumenda dolorum officiis odit optio modi, aspernatur necessitatibus libero, itaque repellendus. Incidunt blanditiis magni velit.</p>
    
12.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis fuga saepe sunt delectus, quo assumenda dolorum officiis odit optio modi, aspernatur necessitatibus libero, itaque repellendus. Incidunt blanditiis magni velit.</p>
    
13.       </div>
    
14.     </div>
    
15.   </details>
    
16.   <details>
    
17.     <summary>Accordion heading 2</summary>
    
18.     <div class="details-wrapper">
    
19.       <div class="details-styling">        
    
20.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis fuga saepe sunt delectus, quo assumenda dolorum officiis odit optio modi, aspernatur necessitatibus libero, itaque repellendus. Incidunt blanditiis magni velit.</p>
    
21.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis fuga saepe sunt delectus, quo assumenda dolorum officiis odit optio modi, aspernatur necessitatibus libero, itaque repellendus. Incidunt blanditiis magni velit.</p>
    
22.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis fuga saepe sunt delectus, quo assumenda dolorum officiis odit optio modi, aspernatur necessitatibus libero, itaque repellendus. Incidunt blanditiis magni velit.</p>
    
23.       </div>
    
24.     </div>
    
25.   </details>
    
26.   <details>
    
27.     <summary>Accordion heading 3</summary>
    
28.     <div class="details-wrapper">   
    
29.       <div class="details-styling">        
    
30.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis fuga saepe sunt delectus, quo assumenda dolorum officiis odit optio modi, aspernatur necessitatibus libero, itaque repellendus. Incidunt blanditiis magni velit.</p>
    
31.       </div>
    
32.     </div>
    
33.   </details>
    
34. </div>
    
35. 
    
36. <p>Using the <a href="https://github.com/javan/details-element-polyfill">details-element-polyfill</a> for IE/Edge support</p>

复制代码

1. // Classes set via JS
   
2. $accordionClass: '.collapse-init';
   
3. $panelClass: '.panel-active';
   
4. $contentsClass: 'summary + *';
   
5. 
   
6. /*
   
7.   Please wrap your collapsible content in a single element or so help me
   
8.   Must add a transition or it breaks because that's the whole purpose of this
   
9.   Only one transition-duration works (see explanation on line #141 in JS)
   
10.   You can add more to an inner wrapper (.details-styling)
    
11. */
    
12. //Simplified: .details-wrapper{}
    
13. #{$accordionClass $contentsClass} {
    
14.   transition: all 0.25s ease-in-out;
    
15.   overflow: hidden; // because we're animating height
    
16. }
    
17. 
    
18. /*
    
19.   Closed state. Any CSS transitions work here
    
20.   The JS has a height calculation to make sliding opened/closed easier, but it's not necessary
    
21.   Remove the height prop for a simple toggle on/off (after all that work I did for you?)
    
22. */
    
23. //Simplified: :not(.panel-active) .details-wrapper {}
    
24. #{$accordionClass} :not(#{$panelClass}) #{$contentsClass} {  
    
25.   height: 0;
    
26.   opacity: 0;
    
27.   transform: scale(0.9);
    
28.   transform-origin: bottom center;
    
29. }
    
30. 
    
31. // Let's get rid of the default arrows so we can style our own, as we must find whatever little joy we can in this garbage web
    
32. #{$accordionClass} {
    
33.   summary { list-style: none; } // Spec
    
34.   summary::-webkit-details-marker { display: none; } // Chrome
    
35.   summary::before { display: none; } // Polyfill
    
36.    
    
37.   // Should we do this? No idea
    
38.   summary { cursor: pointer; }
    
39. }
    
40. 
    
41. /*
    
42.   This element exists so .details-wrapper has no extra margin/padding that can screw with the smooth height collapse
    
43.   You can style .details-wrapper decoratively but avoid anything that modifies the box and add it to .details-styling instead
    
44.   Otherwise, this element is totally optional. Remove if you hate divitis
    
45. */
    
46. .details-styling {
    
47.   padding: 1em;
    
48. }
    
49. 
    
50. //======= Non-essential page styling, ignore
    
51. $hue: 260;
    
52. 
    
53. $background: hsl($hue, 90, 98);
    
54. $text: hsl($hue, 20, 25);
    
55. 
    
56. $primary: hsl($hue, 85, 50);
    
57. $link: hsl($hue, 75, 65);
    
58. $border: hsl($hue, 20, 85);
    
59. 
    
60. ::selection {
    
61.   $rot: 140;
    
62.   
    
63.   background: hsl($hue + $rot, 95, 70);
    
64.   color: adjust-hue($text, $rot);
    
65. }
    
66. 
    
67. html {
    
68.   background: $background;
    
69.   color: $text;
    
70. }
    
71. 
    
72. body {
    
73.   font: 1em/1.4 'Quicksand', sans-serif;
    
74.   margin: 0 auto;
    
75.   max-width: 960px;
    
76.   padding: 5vw;
    
77. }
    
78. 
    
79. h1 {
    
80.   font-size: 2em;
    
81.   margin-bottom: 1em;
    
82.   text-align: center;
    
83.   
    
84.   + p {
    
85.     margin-left: auto;
    
86.     margin-right: auto;
    
87.     max-width: 50ch;
    
88.   }
    
89.   
    
90.   ~ p {
    
91.     font-size: 1.2em;
    
92.     text-align: center;
    
93.   }
    
94. }
    
95. 
    
96. p {
    
97.   margin-top: 0;
    
98.   margin-bottom: 1em;
    
99.   
    
100.   &:last-child { margin-bottom: 0; }
     
101. }
     
102. 
     
103. code {
     
104.   $rot: 90;
     
105.   
     
106.   background: hsla($hue + $rot, 70, 70, 0.1);
     
107.   color: hsl($hue + $rot - 5, 75, 65);
     
108. }
     
109. 
     
110. a {
     
111.   color: $link;
     
112.   box-shadow: inset 0 -3px lighten($link, 20);
     
113.   font-weight: 700;
     
114.   text-decoration: none;
     
115.   transition: 0.2s;
     
116.   
     
117.   &:hover,
     
118.   &:focus {
     
119.     box-shadow: inset 0 -1.2em $link;
     
120.     color: $background;
     
121.   }
     
122. }
     
123. 
     
124. abbr {
     
125.   font-variant: small-caps;
     
126.   text-transform: lowercase;
     
127.   font-size: 1.2em;
     
128. }
     
129. 
     
130. [type=checkbox] {
     
131.   opacity: 0;
     
132.   position: absolute;
     
133.   width: 0;
     
134.   height: 0;
     
135.   
     
136.   + label {
     
137.     background: lighten($primary, 45);
     
138.     border-left: 4px solid $primary;
     
139.     cursor: pointer;
     
140.     display: block;
     
141.     font-size: 1rem;
     
142.     font-weight: 700;
     
143.     text-align: left;
     
144.     transition: 0.1s;
     
145.     padding: 0.75em 1em;
     
146.    
     
147.     &::before {
     
148.       border: 2px solid;
     
149.       border-radius: 2px;
     
150.       color: $primary;
     
151.       content: '';
     
152.       display: inline-block;
     
153.       margin-right: 0.75ch;
     
154.       transition: 0.1s;
     
155.       width: 1ch;
     
156.       height: 1ch;
     
157.       vertical-align: baseline;
     
158.     }
     
159.   }
     
160.   
     
161.   &:focus + label {
     
162.     outline: 2px solid $primary;   
     
163.   }
     
164.   
     
165.   &:checked + label::before {
     
166.     background: currentColor;
     
167.     box-shadow: inset 0 0 0 2px #fff;
     
168.   }
     
169. }
     
170. 
     
171. .container {
     
172.   box-shadow: 0.2em 1em 2em -1em $border;
     
173.   margin: 2.4em 0;
     
174. }
     
175. 
     
176. //==== Accordion element styling
     
177. details {
     
178.   $b: 6px;
     
179.   
     
180.   background: #fff;
     
181.   border: 1px solid $border;
     
182.   border-bottom: 0;
     
183.   list-style: none;
     
184.   
     
185.   &:first-child {
     
186.     border-radius: $b $b 0 0;
     
187.   }
     
188.   
     
189.   &:last-child {
     
190.     border-bottom: 1px solid $border;
     
191.     border-radius: 0 0 $b $b;
     
192.   }
     
193. }
     
194. 
     
195. summary {
     
196.   $arrow-size: 0.5em;
     
197.   
     
198.   display: block;
     
199.   transition: 0.2s;
     
200.   font-weight: 700;
     
201.   padding: 1em;
     
202.    
     
203.   &:focus {
     
204.     outline: 2px solid $primary;
     
205.   }
     
206.   
     
207.   #{$accordionClass} &::after {
     
208.     border-right: 2px solid;
     
209.     border-bottom: 2px solid;
     
210.     content: '';
     
211.     float: right;
     
212.     width: $arrow-size;
     
213.     height: $arrow-size;
     
214.     margin-top: $arrow-size/2;
     
215.     transform: rotate(45deg);
     
216.     transition: inherit;
     
217.   }
     
218.   
     
219.   [open] & {
     
220.     background: $primary;
     
221.     color: $background;
     
222.    
     
223.     &::after {
     
224.       margin-top: $arrow-size;
     
225.       transform: rotate(225deg);
     
226.     }
     
227.   }
     
228. }

复制代码