• 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)    是否设置触发点
  • 相关阅读:
    [CF1475F] Unusual Matrix
    [JXOI2018] 游戏
    [ZJOI2010] 排列计数
    [CF1474E] What Is It?
    [CF375D] Tree and Queries
    [CF519E] A and B and Lecture Rooms
    [CF321C] Ciel the Commander
    [CF1C] Ancient Berland Circus
    [CF321A] Ciel and Robot
    [CF1450C1] Errich-Tac-Toe (Easy Version)
  • 原文地址:https://www.cnblogs.com/beata/p/5717517.html
Copyright © 2020-2023  润新知