<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>jquery的toggle的常用切换</title>
<script language=”javascript” src=”jquery-1.8.0.js”></script>
<style>
#menu {
width:300px;
}
.haschildren{
background : #555;
color :#fff;
cursor:pointer;
}
.highlight{
color : #fff;
background : green;
}
.highlight2{
color : #fff;
background : red;
}
ul{
list-style:none;
padding:0;
}
ul li{ background : #888;
display : none;
}
</style>
<script type=”text/javascript”>
$(function(){
$(“.haschildren”).click(function(){
$(this).addClass(“highlight”).children(“li”).slideToggle().parent().toggleClass(“highlight2″);
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<div id=”menu”>
<ul>第1章-认识一下jQuery
<li>1.1-jQuery简介</li>
<li>1.2-加入jQuery</li>
<li>1.3-编写jQuery代码</li>
<li>1.4-jQuery对象和DOM对象</li>
<li>1.5-解决jQuery和其它库的冲突</li>
<li>1.6-小结</li>
</ul>
<ul>第2章-jQuery之选择器
<li>2.1-什么是选择器</li>
<li>2.2-jQuery选择器的优势</li>
<li>2.3-jQuery选择器</li>
<li>2.4-选择器中带特殊符号的处理</li>
<li>2.5-javascript中的一些对比操作势</li>
<li>2.6-做一个图片展示效果</li>
<li>2.7-小结</li>
</ul>
<ul>第3章-jQuery之DOM操作
<li>3.1-介绍DOM操作的重要性</li>
<li>3.2-jQuery的DOM操作</li>
<li>3.3-打造一个图片馆</li>
<li>3.4-小结</li>
</ul>
</div>
</body>
</html>