优雅降级的<details>折叠面板

yycvip

在原生HTML折叠面板的基础上，通过CSS和JavaScript增加了动画效果，并动态计算每个部分的高度。如果用户禁用了JavaScript，界面也能保持正常功能。

效果演示

HTML

1. <div class="wrapper">
   
2.   <section class="details-group">
   
3.     <details class="details" open>
   
4.       <summary class="details__summary">
   
5.         &lt;details&gt; and &lt;summary&gt;
   
6.       </summary>
   
7.       <div class="details__content">
   
8.         <p>The &lt;details&gt; and &lt;summary&gt; elements are used to allow common accordion-style functionality without relying on JavaScript.</p>
   
9.       </div>
   
10.     </details>
    
11. 
    
12.     <details class="details">
    
13.       <summary class="details__summary">Making it better</summary>
    
14.       <div class="details__content">
    
15.         <p>With a little help from JavaScript, we can supplement the default behavior to make an accordion that is super smooth and nicely-styled, but still degrades gracefully.</p>
    
16.         <p>This accordion uses JS to calculate heights so we can use CSS transitions without any max-height hacks. It also sets a timeout before removing the <code>open</code> attribute, so the content of the <code>&lt;details&gt;</code> element will stay visible until the height transition is finished.</p>
    
17.         <p>The cool part is that since we&rsquo;re using these modern HTML5 elements, the accordion should work just fine even with JavaScript disabled. <strong><em>Gasp!</em> A simple web component in 2018 that doesn&rsquo;t completely fail without JS?! Sound the alarm!</strong>
    
18.       </div>
    
19.     </details>
    
20. 
    
21.     <details class="details">
    
22.       <summary class="details__summary">Settings</summary>
    
23.       <div class="details__content">
    
24.         <ul>
    
25.           <li>
    
26.             <strong><code>speed</code></strong> <em>(default: <code>300</code>)</em> Speed of the transition in milliseconds. Setting this in the plugin will override the value specified in the CSS.
    
27.           </li>
    
28.           <li>
    
29.             <strong><code>one_visible</code></strong> <em>(default: <code>false</code>)</em> Determines whether details can be toggled independently, or if only one can be visible at a time.
    
30.           </li>
    
31.         </ul>
    
32.       </div>
    
33.     </details>
    
34. 
    
35.     <details class="details">
    
36.       <summary class="details__summary">Shameless Plug</summary>
    
37.       <div class="details__content">
    
38.         <p>If you liked this pen, check out <a target="_blank" href="https://keithpickering.github.io">my portfolio site</a>. I&rsquo;m accepting new projects all the time, so drop me a line.</p>
    
39.       </div>
    
40.     </details>
    
41.   </section>
    
42. </div>

复制代码

1. @import url('https://fonts.googleapis.com/css?family=Oswald:300|Roboto:300,500');
   
2. 
   
3. $spacing: 24px;
   
4. $plus-size: 16px;
   
5. $plus-thickness: 2px;
   
6. $speed: 300ms;
   
7. $easing: ease-in-out;
   
8. $gray-dark: #546E7A;
   
9. $gray: #CFD8DC;
   
10. $gray-light: #ECEFF1;
    
11. $primary: #00ACC1;
    
12. 
    
13. html, body {
    
14.   min-height: 100%;
    
15. }
    
16. 
    
17. html {
    
18.   overflow-y: scroll;
    
19.   font-size: 18px;
    
20. }
    
21. 
    
22. body {
    
23.   font-size: 1rem;
    
24.   font-weight: 300;
    
25.   font-family: Roboto, sans-serif;
    
26.   line-height: 1.4;
    
27.   color: $gray-dark;
    
28.   background-color: $gray-light;
    
29. }
    
30. 
    
31. p, ul, li {
    
32.   margin: 0;
    
33.   padding: 0;
    
34.   margin-bottom: $spacing;
    
35.   
    
36.   &:last-child {
    
37.     margin-bottom: 0;
    
38.   }
    
39. }
    
40. 
    
41. a { color: $primary; }
    
42. 
    
43. code { background: $gray-light; }
    
44. 
    
45. .wrapper {
    
46.   max-width: 640px;
    
47.   margin-left: auto;
    
48.   margin-right: auto;
    
49.   padding: $spacing*2;
    
50. }
    
51. 
    
52. .details-group {
    
53.   border: 1px solid $gray;
    
54.   border-radius: 5px;
    
55.   background-color: white;
    
56. }
    
57. 
    
58. .details {
    
59.   overflow: hidden;
    
60.   border-bottom: 1px solid $gray;
    
61.   transition: height $speed $easing;
    
62.   
    
63.   &:last-child {
    
64.     border-bottom: 0;
    
65.   }
    
66.   
    
67.   &__summary,
    
68.   &__content {
    
69.     padding: $spacing;
    
70.   }
    
71.   
    
72.   &__summary {
    
73.     position: relative;
    
74.     list-style: none; // Hide the marker (proper method)
    
75.     padding-left: $spacing*2;
    
76.     outline: 0;
    
77.     cursor: pointer;
    
78.     font-size: 1.4rem;
    
79.     font-family: Oswald;
    
80.     text-transform: uppercase;
    
81.     transition: color $speed $easing;
    
82.    
    
83.     [open] > & {
    
84.       color: $primary;
    
85.     }
    
86.    
    
87.     // Hide the marker in Webkit
    
88.     &::-webkit-details-marker {
    
89.       display: none;
    
90.     }
    
91.    
    
92.     // Our replacement marker
    
93.     &:before,
    
94.     &:after {
    
95.       content: "";
    
96.       position: absolute;
    
97.     }
    
98.    
    
99.     &:before {
    
100.       left: $spacing/2 + $plus-size/2;
     
101.       top: 50%;
     
102.       height: $plus-thickness;
     
103.       margin-top: -$plus-thickness/2;
     
104.       width: $plus-size;
     
105.       background: $primary;
     
106.     }
     
107.    
     
108.     &:after {
     
109.       left: $spacing/2 + $plus-size;
     
110.       top: 50%;
     
111.       height: $plus-size;
     
112.       margin-top: -$plus-size/2;
     
113.       width: $plus-thickness;
     
114.       margin-left: -$plus-thickness/2;
     
115.       background: $primary;
     
116.       transition: all $speed $easing;
     
117.     }
     
118.    
     
119.     [open] &:after {
     
120.       opacity: 0;
     
121.       transform: translateY(25%);
     
122.     }
     
123.   }
     
124.   
     
125.   &__content {
     
126.     padding-top: 0;
     
127.     padding-left: $spacing*2;
     
128.   }
     
129. }

复制代码

1. class Details {
   
2.   constructor(el, settings) {
   
3.     this.group    = el;
   
4.     this.details  = this.group.getElementsByClassName("details");
   
5.     this.toggles  = this.group.getElementsByClassName("details__summary");
   
6.     this.contents = this.group.getElementsByClassName("details__content");   
   
7.    
   
8.     // Set default settings if necessary
   
9.     this.settings = Object.assign({
   
10.       speed: 300,
    
11.       one_visible: false
    
12.     }, settings);
    
13.    
    
14.     // Setup inital positions
    
15.     for (let i = 0; i < this.details.length; i++) {
    
16.       const detail  = this.details[i];
    
17.       const toggle  = this.toggles[i];
    
18.       const content = this.contents[i];
    
19.       
    
20.       // Set transition-duration to match JS setting
    
21.       detail.style.transitionDuration = this.settings.speed + "ms";
    
22.       
    
23.       // Set initial height to transition from
    
24.       if (!detail.hasAttribute("open")) {
    
25.         detail.style.height = toggle.clientHeight + "px";
    
26.       } else {
    
27.         detail.style.height = toggle.clientHeight + content.clientHeight + "px";
    
28.       }
    
29.     }
    
30.    
    
31.     // Setup click handler
    
32.     this.group.addEventListener("click", (e) => {      
    
33.       if (e.target.classList.contains("details__summary")) {
    
34.         e.preventDefault();
    
35.         
    
36.         let num = 0;
    
37.         for (let i = 0; i < this.toggles.length; i++) {
    
38.           if (this.toggles[i] === e.target) {
    
39.             num = i;
    
40.             break;
    
41.           }
    
42.         }
    
43.         
    
44.         if (!e.target.parentNode.hasAttribute("open")) {
    
45.           this.open(num);
    
46.         } else {
    
47.           this.close(num);
    
48.         }
    
49.       }
    
50.     });
    
51.   }
    
52.   
    
53.   open(i) {
    
54.     const detail = this.details[i];
    
55.     const toggle = this.toggles[i];
    
56.     const content = this.contents[i];
    
57.    
    
58.     // If applicable, hide all the other details first
    
59.     if (this.settings.one_visible) {
    
60.       for (let a = 0; a < this.toggles.length; a++) {
    
61.         if (i !== a) this.close(a);
    
62.       }
    
63.     }
    
64.    
    
65.     // Update class
    
66.     detail.classList.remove("is-closing");
    
67.    
    
68.     // Get height of toggle
    
69.     const toggle_height = toggle.clientHeight;
    
70.    
    
71.     // Momentarily show the contents just to get the height
    
72.     detail.setAttribute("open", true);
    
73.     const content_height = content.clientHeight;
    
74.     detail.removeAttribute("open");
    
75.    
    
76.     // Set the correct height and let CSS transition it
    
77.     detail.style.height = toggle_height + content_height + "px";
    
78.    
    
79.     // Finally set the open attr
    
80.     detail.setAttribute("open", true);
    
81.   }
    
82.   
    
83.   close(i) {
    
84.     const detail = this.details[i];
    
85.     const toggle = this.toggles[i];
    
86.    
    
87.     // Update class
    
88.     detail.classList.add("is-closing");
    
89.    
    
90.     // Get height of toggle
    
91.     const toggle_height = toggle.clientHeight;
    
92.    
    
93.     // Set the height so only the toggle is visible
    
94.     detail.style.height = toggle_height + "px";
    
95.    
    
96.     setTimeout(() => {
    
97.       // Check if still closing
    
98.       if (detail.classList.contains("is-closing"))
    
99.         detail.removeAttribute("open");
    
100.         detail.classList.remove("is-closing");
     
101.     }, this.settings.speed);
     
102.   }
     
103. }
     
104. 
     
105. (() => {
     
106.   const els = document.getElementsByClassName("details-group");
     
107.   
     
108.   for (let i = 0; i < els.length; i++) {
     
109.     const details = new Details(els[i], {
     
110.       speed: 500,
     
111.       one_visible: true
     
112.     });
     
113.   }
     
114. })();

复制代码