1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>手风琴</title> 6 <script src="../base/jquery-3.1.0.js"></script> 7 <script src="../base/slider.js"></script> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 #slider { 15 width: 100%; 16 height: 300px; 17 } 18 19 dt { 20 width: 100%; 21 height: 100px; 22 background: cornflowerblue; 23 } 24 25 dd { 26 width: 100%; 27 height: 100px; 28 background: darkmagenta; 29 } 30 </style> 31 </head> 32 <body> 33 <dl id="slider" class="sliderbox"> 34 <dt> 35 <span class="title">title1</span> 36 </dt> 37 <dd> 38 <p class="text">con1</p> 39 </dd> 40 <dt> 41 <span class="title">title2</span> 42 </dt> 43 <dd> 44 <p class="text">con2</p> 45 </dd> 46 <dt> 47 <span class="title">title3</span> 48 </dt> 49 <dd> 50 <p class="text">con3</p> 51 </dd> 52 </dl> 53 <script> 54 var slider = new accordion.slider("slider"); 55 slider.init("slider", 0, "open"); 56 </script> 57 </body> 58 </html>
说明：使用silder.js插件
只能用dl dt dd标签，以为slider.js写道
1 h = a.getElementsByTagName('dt'); 2 s = a.getElementsByTagName('dd');