JQuery练习demo2
1.效果如图：
2.代码：
代码
<!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>
<style type="text/css">
#menu
{
width:350px;
}
.has_children
{
background:#555;
color:#fff;
cursor:pointer;
}
.highlight
{
color:#fff;
background:green;
}
a
{
background:#888;
display:none;
float:left;
width:350px;
}
</style>
<script src="JQuery/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".has_children").click(function() {
//siblings 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();
});
});
</script>
</head>
<body>
<div id="menu">
<div class="has_children">
<span>第一章 认识JQuery</span>
<a>1.1 javascript和javascript库</a>
<a>1.2 javascript和javascript库</a>
<a>1.3 javascript和javascript库</a>
</div>
<div class="has_children">
<span>第二章 认识JQuery</span>
<a>2.1 javascript和javascript库</a>
<a>2.2 javascript和javascript库</a>
<a>2.3 javascript和javascript库</a>
<a>2.4 javascript和javascript库</a>
</div>
<div class="has_children">
<span>第三章 认识JQuery</span>
<a>3.1 javascript和javascript库</a>
<a>3.2 javascript和javascript库</a>
<a>3.3 javascript和javascript库</a>
<a>3.4 javascript和javascript库</a>
<a>3.5 javascript和javascript库</a>
</div>
</div>
</body>
</html>
3.小修改（实现点击展开，再次点击关闭）
代码
<!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>
<style type="text/css">
#menu
{
width:350px;
}
.has_children
{
background:#555;
color:#fff;
cursor:pointer;
}
.highlight
{
color:#fff;
background:green;
}
a
{
background:#888;
float:left;
width:350px;
}
</style>
<script src="JQuery/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").hide();
$(".has_children").click(function() {
var $content = $(".has_children").children("a");
if ($content.is(":visible")) {
$(this).removeClass("highlight").children("a").hide().end();
}
else {
$(this).addClass("highlight").children("a").show().end();
}
});
});
</script>
</head>
<body>
<div id="menu">
<div class="has_children">
<span>第一章 认识JQuery</span>
<a>1.1 javascript和javascript库</a>
<a>1.2 javascript和javascript库</a>
<a>1.3 javascript和javascript库</a>
</div>
<div class="has_children">
<span>第二章 认识JQuery</span>
<a>2.1 javascript和javascript库</a>
<a>2.2 javascript和javascript库</a>
<a>2.3 javascript和javascript库</a>
<a>2.4 javascript和javascript库</a>
</div>
<div class="has_children">
<span>第三章 认识JQuery</span>
<a>3.1 javascript和javascript库</a>
<a>3.2 javascript和javascript库</a>
<a>3.3 javascript和javascript库</a>
<a>3.4 javascript和javascript库</a>
<a>3.5 javascript和javascript库</a>
</div>
</div>
</body>
</html>
补充下某句改成这样var $content = $(this).children("a");大家可以试下效果有什么不同。
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
· ThreeJs-16智慧城市项目（重磅以及未来发展ai）
· .NET 原生驾驭 AI 新基建实战系列（一）：向量数据库的应用与畅想
· Ai满嘴顺口溜，想考研？浪费我几个小时
· Browser-use 详细介绍&使用文档
· 软件产品开发中常见的10个问题及处理方法