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入门者有所帮助..
<!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(){ 
$(document).ready($("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入门者有所帮助..
