zoukankan      html  css  js  c++  java
  • jquery手风琴

    --js
    
    $(document).ready(function(){
    
    //Set default open/close settings
    $('.acc_container').hide(); //Hide/close all containers
    $('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
    
    //On Click
    $('.acc_trigger').click(function(){
    if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
    $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
    $(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
    }
    return false; //Prevent the browser jump to the link anchor
    });
    
    });
    
     
    
    --html
    
    
    <div class="study-con">
    <h5 class="plate-tit">学习计划</h5>
    <dl class="tucked">
    <dt class="acc_trigger active"><a href="#">第一章</a></dt>
    <dd class="acc_container" style="display: block;">
    <ul>
    <li>· <a href="#">测量</a></li>
    <li>· <a href="#">万以内的加法...</a></li>
    <li>· <a href="#">四边形</a></li>
    <li>· <a href="#">有余数的除法</a></li>
    <li>· <a href="#">时、分、秒</a></li>
    <li>· <a href="#">多位数乘一位数</a></li>
    <li>· <a href="#">分数的初步认识</a></li>
    <li>· <a href="#">可能性</a></li>
    </ul>
    </dd>
    </dl>
    <dl class="tucked">
    <dt class="acc_trigger"><a href="#">第二章</a></dt>
    <dd class="acc_container" style="display: none;">
    <ul>
    <li>· <a href="#">测量</a></li>
    <li>· <a href="#">万以内的加法...</a></li>
    <li>· <a href="#">四边形</a></li>
    <li>· <a href="#">有余数的除法</a></li>
    <li>· <a href="#">时、分、秒</a></li>
    <li>· <a href="#">多位数乘一位数</a></li>
    <li>· <a href="#">分数的初步认识</a></li>
    <li>· <a href="#">可能性</a></li>
    </ul>
    </dd>
    </dl>
    <dl class="tucked">
    <dt class="acc_trigger"><a href="#">第三章</a></dt>
    <dd class="acc_container" style="display: none;">
    <ul>
    <li>· <a href="#">测量</a></li>
    <li>· <a href="#">万以内的加法...</a></li>
    <li>· <a href="#">四边形</a></li>
    <li>· <a href="#">有余数的除法</a></li>
    <li>· <a href="#">时、分、秒</a></li>
    <li>· <a href="#">多位数乘一位数</a></li>
    <li>· <a href="#">分数的初步认识</a></li>
    <li>· <a href="#">可能性</a></li>
    </ul>
    </dd>
    </dl>
    <dl class="tucked">
    <dt class="acc_trigger"><a href="#">第四章</a></dt>
    <dd class="acc_container" style="display: none;">
    <ul>
    <li>· <a href="#">测量</a></li>
    <li>· <a href="#">万以内的加法...</a></li>
    <li>· <a href="#">四边形</a></li>
    <li>· <a href="#">有余数的除法</a></li>
    <li>· <a href="#">时、分、秒</a></li>
    <li>· <a href="#">多位数乘一位数</a></li>
    <li>· <a href="#">分数的初步认识</a></li>
    <li>· <a href="#">可能性</a></li>
    </ul>
    </dd>
    </dl>
    </div>
    
     
    
    --css
    
    
    .study-con{box-shadow:0 1px 6px rgba(0,0,0,0.1); margin-bottom:-1px}
    .study-con dl{ background:#fff; border-bottom:1px solid #fff}
    .study-con dd{ padding:0 0 10px 10px;white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
    .study-con dd a{ display:inline-block; font-size:12px;margin-right:0}
    
    .study-con dt.acc_trigger{ cursor:pointer; background:#f8f8f8 url(../images/plate-down.gif) no-repeat 95% center}
    .study-con dt.active{ background:#f8f8f8 url(../images/plate-up.gif) no-repeat 95% center}
    .study-con dt.active a{ background:url(../images/plate1_2.gif) no-repeat 0 center}
    
    .study-con dd.acc_container a{ 190px; text-align:left; margin:0; line-height:28px; border:0; background:url(../images/san.png) no-repeat right center}
    .study-con dd.acc_container ul{ margin-top:10px}
    .plate-con dl.tucked{ border-bottom:1px solid #fff}
  • 相关阅读:
    【模板】Sparse-Table
    UVa 11235 Frequent values
    【模板】树状数组
    UVa 1428 Ping pong
    数学技巧
    UVa 11300 Spreading the Wealth
    UVa 11729 Commando War
    UVa 11292 Dragon of Loowater
    POJ 3627 Bookshelf
    POJ 1056 IMMEDIATE DECODABILITY
  • 原文地址:https://www.cnblogs.com/hofmann/p/6148711.html
Copyright © 2011-2022 走看看