废话少说,上代码
<!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>测试 查找下一个元素</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#menu ul li:first ul").show();
$("#menu ul li:gt(0) ul").hide();
$("#menu li a.parentMenu").click(function () {
if ($(this).next(".childMenu").is(":hidden")) {
$("ul .childMenu").hide();
$(this).next(".childMenu").show();
}
else {
$("ul .childMenu").hide();
$(this).next(".childMenu").hide();
}
});
});
</script>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#" class="parentMenu">一级菜单A</a>
<ul class="childMenu">
<li>A的子菜单</li>
<li>A的子菜单</li>
<li>A的子菜单</li>
<li>A的子菜单</li>
</ul>
</li>
<li><a href="#" class="parentMenu">一级菜单B</a>
<ul class="childMenu">
<li>B的子菜单</li>
<li>B的子菜单</li>
<li>B的子菜单</li>
<li>B的子菜单</li>
</ul>
</li>
<li><a href="#" class="parentMenu">一级菜单C</a>
<ul class="childMenu">
<li>C的子菜单</li>
<li>C的子菜单</li>
<li>C的子菜单</li>
<li>C的子菜单</li>
</ul>
</li>
<li><a href="#" class="parentMenu">一级菜单D</a>
<ul class="childMenu">
<li>D的子菜单</li>
<li>D的子菜单</li>
<li>D的子菜单</li>
<li>D的子菜单</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
做一个笔记,主要记一下jQuery选择器 如何选中 下一个元素,如何选择 元素集中指定某个或者某几个元素