http://www.iloveyou10000.com

新blogs地址 http://itares.cnblogs.com
博客园 首页 新随笔 联系 订阅 管理
  127 Posts :: 14 Stories :: 75 Comments :: 1 Trackbacks
jquery入门1:简单收缩菜单
HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
<link rel="stylesheet" href="css.css" type="text/css">
<script src="jquery-1.1.4.js"></script>
</head>
<script>
$(document).ready(function(){ 
$("div.menu2").css("display","none");

$("div.menu1").click( function() { $(this).children('.menu2') .slideToggle("slow");} );

$("div.menu2").click( function() { alert(this.getAttribute("href")); return false;});

});
</script>
<body>
<div class="menu1">
1
<div class="menu2" href="123.htm">1-1</div>
<div class="menu2" href="123.htm">1-2</div>
<div class="menu2" href="123.htm">1-3</div>
<div class="menu2" href="123.htm">1-4</div>
</div>


<div class="menu1"> 
2
<div class="menu2">2-1</div>
<div class="menu2">2-2</div>
<div class="menu2">2-3</div>
<div class="menu2">2-4</div>
</div>


<div class="menu1">
3
<div class="menu2">3-1</div>
<div class="menu2">3-2</div>
<div class="menu2">3-3</div>
<div class="menu2">3-4</div>
</div>
</body>
</html>

CSS代码:
.menu1{background-color : #FFFDA0;
}

.menu2{background-color : #C4BCFF;

}

代码很简单,我就不描述了//希望对jquery入门者有所帮助..
posted on 2007-09-10 10:30 fanrsh 阅读(1160) 评论(5) 编辑 收藏

Feedback

#1楼 2007-09-10 10:34 路上行人[未注册用户]
顶了..呵呵
　回复　引用　  

#2楼 2007-09-10 10:34 Rick Hunter[未注册用户]
沙发
　回复　引用　  

#3楼 2007-09-10 10:37 觉醒还是沉迷[未注册用户]
不错，简单，实用，顶你一下
　回复　引用　  

#4楼 2007-09-10 20:59 itnet[未注册用户]
good
　回复　引用　  

#5楼 2008-01-30 11:17 flyingchen      
牛逼红红！
　回复　引用　查看　  

最新IT新闻:
· iPhone 5四大猜想：泪珠状 带LED苹果标识
· 当当网Q4整体亏损1.3亿元 上年同期净利润1480万元
· 把孩子培养成为合格Geek的七个方法
· 担心网购的衣服不合身? 创业公司Clothes Horse用“问答”就能解决你的难题
· 评价社交媒体活动ROI的三个精确指标
» 更多新闻...