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入门者有所帮助..
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。