Accordion - 手风琴
//手风琴效果 <div style="overflow:hidden;height:400px;width:948px;"> <div class="J_TWidget" data-widget-config="{"triggerType":"mouse","autoplay":true,"triggerCls":"pan_trg","panelCls":"pan_content","multiple":false,"hasTriggers":true}" data-widget-type="Accordion"> <div style="height:400px;float:left;margin-left:0px;width:950px;"> <div class="pan_trg" style="overflow:hidden;cursor:pointer;height:400px;float:left;width:30px;background-color:#0088FF;"> <span> <a style="font-weight:normal;color:#FFFFFF;line-height:14px;">文字内容</a> </span> </div> <div class="pan_content" style="overflow:hidden;height:400px;float:left;display:block;width:830px;"> <a href="" target="_blank"> <img src="//gdp.alicdn.com/imgextra/i3/743621069/T23u.9XgpaXXXXXXXX-743621069.jpg" style="height:400px;width:830px;" /></a> </div> <div class="pan_trg" style="overflow:hidden;cursor:pointer;height:400px;float:left;width:30px;background-color:#FF8000;"> <span> <a style="font-weight:normal;color:#FFFFFF;line-height:14px;">文字内容</a> </span> </div> <div class="pan_content" style="overflow:hidden;height:400px;float:left;display:none;width:830px;"> <a href="" target="_blank"> <img src="//gdp.alicdn.com/imgextra/i3/743621069/T23u.9XgpaXXXXXXXX-743621069.jpg" style="height:400px;width:830px;" /></a> </div> <div class="pan_trg" style="overflow:hidden;cursor:pointer;height:400px;float:left;width:30px;background-color:#008000;"> <a style="font-weight:normal;color:#FFFFFF;line-height:14px;">文字内容</a> </div> <div class="pan_content" style="overflow:hidden;height:400px;float:left;display:none;width:830px;"> <a href="" target="_blank"> <img src="//gdp.alicdn.com/imgextra/i3/743621069/T23u.9XgpaXXXXXXXX-743621069.jpg" style="height:400px;width:830px;" /></a> </div> <div class="pan_trg" style="overflow:hidden;cursor:pointer;height:400px;float:left;width:30px;background-color:#606060;"> <a style="font-weight:normal;color:#FFFFFF;line-height:14px;">文字内容</a> </div> <div class="pan_content" style="overflow:hidden;height:400px;float:left;display:none;width:830px;"> <a href="" target="_blank"> <img src="//gdp.alicdn.com/imgextra/i3/743621069/T23u.9XgpaXXXXXXXX-743621069.jpg" style="height:400px;width:830px;" /></a> </div> </div> </div> </div> triggerCls 自定义值 主列表的class值 panelCls 自定义值 列表所对应的内容列表的class值 triggerType mouse/click (默认值:click) 触发方式—— mouse:鼠标经过触发 click:鼠标点击触发 multiple true/false (默认值:false) 是否同时支持多面板展开 hasTriggers true/false (默认值:true) 是否设置触发点