zoukankan      html  css  js  c++  java
  • Accordion

    //手风琴效果
    <div style="overflow:hidden;height:400px;948px;">
        <div class="J_TWidget" data-widget-config="{&quot;triggerType&quot;:&quot;mouse&quot;,&quot;autoplay&quot;:true,&quot;triggerCls&quot;:&quot;pan_trg&quot;,&quot;panelCls&quot;:&quot;pan_content&quot;,&quot;multiple&quot;:false,&quot;hasTriggers&quot;:true}" data-widget-type="Accordion">
            <div style="height:400px;float:left;margin-left:0px;950px;">
                <div class="pan_trg" style="overflow:hidden;cursor:pointer;height:400px;float:left;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;830px;">
                     <a href="" target="_blank"> <img  src="//gdp.alicdn.com/imgextra/i3/743621069/T23u.9XgpaXXXXXXXX-743621069.jpg" style="height:400px;830px;" /></a>
                </div>
                <div class="pan_trg" style="overflow:hidden;cursor:pointer;height:400px;float:left;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;830px;">
                     <a href="" target="_blank"> <img src="//gdp.alicdn.com/imgextra/i3/743621069/T23u.9XgpaXXXXXXXX-743621069.jpg" style="height:400px;830px;" /></a>
                </div>
                <div  class="pan_trg" style="overflow:hidden;cursor:pointer;height:400px;float:left;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;830px;">
                     <a href="" target="_blank"> <img src="//gdp.alicdn.com/imgextra/i3/743621069/T23u.9XgpaXXXXXXXX-743621069.jpg" style="height:400px;830px;" /></a>
                </div>
                <div  class="pan_trg" style="overflow:hidden;cursor:pointer;height:400px;float:left;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;830px;">
                     <a href="" target="_blank"> <img src="//gdp.alicdn.com/imgextra/i3/743621069/T23u.9XgpaXXXXXXXX-743621069.jpg" style="height:400px;830px;" /></a>
                </div>
            </div>
        </div>
    </div>
    
    
    triggerCls    自定义值    主列表的class值
    panelCls    自定义值    列表所对应的内容列表的class值
    triggerType    mouse/click (默认值:click)    触发方式——
    mouse:鼠标经过触发
    click:鼠标点击触发
    
    multiple    true/false (默认值:false)    是否同时支持多面板展开
    hasTriggers    true/false (默认值:true)    是否设置触发点
  • 相关阅读:
    GRIDVIEW导出到EXCEL
    数据表示:字节 高位低位
    js学习笔记0
    12奇招,循序删除顽固的文件
    加快开关机速度
    PHP正则表达式的快速学习
    firefox下height不能自动撑开的解决办法
    给MySQL加密(也适用于Wamp5中)
    我的电脑创建资源管理器
    css 圆角7种CSS圆角框解决方案
  • 原文地址:https://www.cnblogs.com/beata/p/5717517.html
Copyright © 2011-2022 走看看