• 用jquery的animate动画做成的左侧菜单伸缩


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>菜单伸缩实例</title>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script>
    $(document).ready(function(){
    $(".two1").toggle(function(){
    $(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
    },function(){
    $(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
    });
    $(".two2").toggle(function(){
    $(".text1").animate({height: 'toggle', opacity: 'toggle'}, "slow");
    },function(){
    $(".text1").animate({height: 'toggle', opacity: 'toggle'}, "slow");
    });
    });
    </script>
    <style>
    *{padding:0;margin:0;color:#000;}
    a{text-decoration:none;}
    dl{background:#eee;100px;}
    dt{font-weight:bold;cursor:pointer;}
    dt,dd{100px;height:30px;line-height:30px;border-bottom:1px solid #ccc;}
    </style>
    </head>
    <body>
    <dl id="two">
    <dt class="two1">指标库管理</dt>
    <dd class="text"><a href="javascript:void(0)">单项工程指标</a></dd>
    <dd class="text"><a href="javascript:void(0)">综合指标</a></dd>
    <dd class="text"><a href="javascript:void(0)">单元指标</a></dd>
    <span class="">
    <dd class="text"><a href="javascript:void(0)">分部分项指标</a></dd>
    <dd class="text"><a href="javascript:void(0)">工程量指标</a></dd>
    </span>
    <dd class="text"><a href="javascript:void(0)">指标审核</a></dd>
    <dd class="text"><a href="javascript:void(0)">我的共享指标</a></dd>


    <dt class="two2">市政管理</dt>
    <dd class="text1"><a href="javascript:void(0)">单项工程指标</a></dd>
    <dd class="text1"><a href="javascript:void(0)">综合指标</a></dd>
    <dd class="text1"><a href="javascript:void(0)">单元指标</a></dd>
    <span>
    <dd class="text1"><a href="javascript:void(0)">分部分项指标</a></dd>
    <dd class="text1"><a href="javascript:void(0)">工程量指标</a></dd>
    </span>
    <dd class="text1"><a href="javascript:void(0)">指标审核</a></dd>
    <dd class="text1"><a href="javascript:void(0)">我的共享指标</a></dd>

    </dl>
    </body>
    </html>

  • 相关阅读:
    BZOJ 2588
    BZOJ 3524
    BZOJ 3932
    Bzoj1013--Jsoi2008球形空间产生器
    Codevs1743--反转卡片
    Bzoj1208--Hnoi2004宠物收养所
    Bzoj1112--Poi2008砖块Klo
    后缀自动机学习笔记
    Bzoj1588--Hnoi2002营业额统计
    Bzoj1056--Haoi2008排名系统
  • 原文地址:https://www.cnblogs.com/ll-taj/p/6121618.html
Copyright © 2020-2023  润新知