欢迎来到懒人图库!
  • 首 页
  • 懒人论坛
  • 侧边导航收缩伸展效果

    2014-11-17 来源/作者:懒人图库 分类:菜单导航 «»
    侧边导航收缩伸展效果 侧边导航收缩伸展效果

    侧边导航收缩伸展效果, 兼容主流浏览器,懒人图库推荐下载!


    使用方法:

    1、head区域引用文件lrtk.css及js库

    <link href="css/lrtk.css" type="text/css" rel="stylesheet">

    <script src="js/jquery-1.3.2.js" type="text/javascript"></script>


    2、引入js代码

    <script type="text/javascript">

    $(function(){

    $(".subNav").click(function(){

    // currentDd 对应收起的样式, currentDt 对应展开的样式

    $(this).toggleClass("currentDd").siblings(".subNav").removeClass("currentDd")

    $(this).toggleClass("currentDt").siblings(".subNav").removeClass("currentDt")

    // 修改数字控制速度, slideUp(500)控制卷起速度

    $(this).next(".navContent").slideToggle(500).siblings(".navContent").slideUp(500);

    })

    })

    </script>

    3、html代码


    效果预览 本地下载  新手使用求助QQ群:133049023
    标签:菜单导航