ajax伸缩菜单,jQuery实现的动态伸缩导航菜单实例

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

jquery select

body {padding:10px; font-family:"宋体"}

* {margin:0; padding:0; font-size:12px;}

a{ color: #333;}

ul,li {

list-style-type:none;

}

.menu_list li a {

display:block; line-height:30px;

text-align:center; height:30px;

background:#e8e8e8; border-bottom:1px solid #ccc;

}

.hover {

background:#e8e8e8;

}

.div1{

height:200px; display:none;

padding:5px;

}

.menu_list{

width:200px; background:#f2f2f2;

border:1px solid #ccc;

}

$(document).ready(function()

{

$(".menu_list ul li").click(function()

{

if($(this).children(".div1").is(":hidden"))

//判断对象是显示还是隐藏

{

if(!$(this).children(".div1").is(":animated")){

//如果当前没有进行动画，则添加新动画

$(this).children(".div1").animate({height:'show'},1000)

.end().siblings().find(".div1").hide(1000);}

}else{

if(!$(this).children(".div1").is(":animated")){

$(this).children(".div1").animate({height:'hide'},1000)

.end().siblings().find(".div1").hide(1000);}

}

}

);

});

• 网页特效

  js特效,网页特效

• 网页模板

  网页模板下载

• 联系我们

  关于脚本之家