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}
  • 相关阅读:
    弹性盒布局(Flexbox布局)
    CSS子元素在父元素中水平垂直居中的几种方法
    Vue中watch用法详解
    深入理解vue中的slot与slot-scope
    Spring 源码学习 03:创建 IoC 容器的几种方式
    Spring 源码学习 02:关于 Spring IoC 和 Bean 的概念
    Spring 源码阅读环境的搭建
    DocView 现在支持自定义 Markdown 模版了!
    Dubbo 接口,导出 Markdown ,这些功能 DocView 现在都有了!
    线程池 ThreadPoolExecutor 原理及源码笔记
  • 原文地址:https://www.cnblogs.com/hofmann/p/6148711.html
Copyright © 2011-2022 走看看