1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Jq-百叶窗插件</title> 6 </head> 7 <body> 8 <style> 9 .qtbz_byc2 { 10 11 margin-top: 25px; 12 13 overflow: hidden; 14 } 15 .qtbz_byc2 dl { 16 background: #fff; 17 } 18 .qtbz_byc2 dl:hover dt, .qtbz_byc2 dl.cur dt { 19 background: #f3f3f3; 20 } 21 22 23 .qtbz_byc2 dl:hover dt a, .qtbz_byc2 dl.cur dt a { 24 color: #373a51; 25 font-size: 28px; 26 font-weight: bold; 27 } 28 .qtbz_byc2 dl dt { 29 height: 70px; 30 background: #f3f3f3; 31 text-align: left; 32 line-height: 70px; 33 border-bottom: 2px solid #fff; 34 -webkit-transition: all 0.2s ease-in-out; 35 -moz-transition: all 0.2s ease-in-out; 36 -ms-transition: all 0.2s ease-in-out; 37 -o-transition: all 0.2s ease-in-out; 38 transition: all 0.2s ease-in-out; 39 } 40 .qtbz_byc2 dl dt a { 41 display: inline-block; 42 height: 70px; 43 line-height: 70px; 44 text-decoration: none; 45 46 color: #343434; 47 font-size: 28px; 48 width: 100%; 49 text-indent:.6em; 50 } 51 52 53 .qtbz_byc2 dl dd { 54 height: 0px; 55 overflow: hidden; 56 } 57 58 59 60 .qtbz_byc2 dl dd .a { 61 margin-left:10px; 62 background: #fff; 63 color: #cbcbcb; 64 } 65 66 67 68 .qtbz_byc2 dl dd{ 69 70 display: block; 71 72 } 73 74 </style> 75 <div class="qtbz_byc2" id="qtbz_byc2"> 76 <dl> 77 <dt> 78 <a href="javascript:void(0);">标题一标题一标题一标题一标题一标题一标题一</a> 79 <span> </span> 80 </dt> 81 <dd> 82 内容内容内容一内容内容内容一内容内容内容一内容内容内容一内容内容内容一 83 </dd> 84 </dl> 85 <dl> 86 <dt> 87 <a href="javascript:void(0);">标题二标题二标题二标题二标题二标题二标题二标题二</a> 88 <span> </span> 89 </dt> 90 <dd> 91 内容二内容二内容二内容二内容二内容二内容二 92 </dd> 93 </dl> 94 <dl> 95 <dt> 96 <a href="javascript:void(0);">标题三标题三标题三标题三标题三标题三标题三</a> 97 <span> </span> 98 </dt> 99 <dd> 100 内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三 101 </dd> 102 </dl> 103 <dl> 104 <dt> 105 <a href="javascript:void(0);">标题四标题四标题四标题四标题四标题四标题四</a> 106 <span> </span> 107 </dt> 108 <dd> 109 内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四 110 </dd> 111 </dl> 112 </div> 113 <script src="http://3gxueye.hkyyxn120.com/js/jquery-1.10.2.min.js"></script> 114 <script> 115 116 //jQuery 插件 jbaiyechuang 117 (function($){ 118 $.fn.jbaiyechuang=function(options){ 119 var defaults={slideDis:"200px",duringtime:300}; 120 var options=$.extend({},defaults,options); 121 122 return this.children().children().each(function(index){ 123 var o=options; 124 $(this).click(function(){ 125 $(this).addClass(".cur"); 126 $(o.slidEle).stop(true,false).animate({"height":0},o.duringtime); 127 $(this).parent().children().last().stop(true,false).animate({"height":o.slideDis},o.duringtime); 128 }) 129 }); 130 } 131 })(jQuery); 132 133 134 135 $("#qtbz_byc2").jbaiyechuang({ 136 slideDis:"200px", //slide高度 137 duringtime:400, //动画时间 138 slidEle:"dd" //动画的设置的元素标签 139 }); 140 </script> 141 </body> 142 </html>
