jquery入门1:简单收缩菜单

2023-09-16 14:07:00 终极管理员知识笔记 83阅读

超文本标记语言代码：DOCTYPEhtmlPUBLIC '-//W3C//dtdxhtml 1.0 transitional//EN ' ' ' html xmlns=' ' head title无标题页面/title linkrel='样式表href=' CSS。CSS ' type=' text/CSS ' scriptsrc=' jquery-1 . 1 . 4。js 'pan/script/headscript$(文档)。ready(function(){$('div.menu2 ').css('显示'

1)">,"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入门者有所帮助..

标签：