代码整理:时代Java - NowJava.com 

注:此代码仅供学习交流,请勿用于商业用途。

侧边导航收缩伸展效果, 兼容主流浏览器,时代Java - NowJava.com推荐下载!


使用方法:

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代码


下载代码说明
X关闭

侧边导航收缩伸展效果

侧边导航收缩伸展效果, 兼容主流浏览器,推荐下载!使用方法:1、head区域引用文件lrtk.css及js库<link href="css/lrtk.css" type="text/css" rel="stylesheet"><script src="js/jquery-1.3.2.js" t