<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伸缩式导航菜单</title>
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>
<style type="text/css">
dl {
width: 158px;
margin:0px;
}
dt {
font-size: 14px;
padding: 0px;
margin: 0px;
width:146px; /*设置宽度*/
height:19px; /*设置高度*/
background-image:url(images/title_show.gif); /*设置背景图片*/
padding:6px 0px 0px 12px;
color:#215dc6;
font-size:12px;
cursor:hand;
}
dd{
color: #000;
font-size: 12px;
margin:0px;
}
a {
text-decoration: none; /*不显示下划线*/
}
a:hover {
color: #FF6600;
}
#top{
width:158px; /*设置宽度*/
height:30px; /*设置高度*/
background-image:url(images/top.gif); /*设置背景图片*/
}
#bottom{
width:158px; /*设置宽度*/
height:31px; /*设置高度*/
background-image:url(images/bottom.gif); /*设置背景图片*/
}
.title{
background-image:url(images/title_quit.gif); /*设置背景图片*/
}
.item{
width:146px; /*设置宽度*/
height:15px; /*设置高度*/
background-image:url(images/item_bg.gif); /*设置背景图片*/
padding:6px 0px 0px 12px;
color:#215dc6;
font-size:12px;
cursor:hand;
background-position:center;
background-repeat:no-repeat;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("dd").hide(); //隐藏全部子菜单
$("dt[class!='title']").click(function(){//单击主菜单执行函数
if($(this).next().is(":hidden")){//如果匹配的元素被隐藏
$(this).css("backgroundImage","url(images/title_hide.gif)");//改变主菜单的背景
$(this).next().slideDown("slow");//滑动显示匹配的元素
}else{
$(this).css("backgroundImage","url(images/title_show.gif)");//改变主菜单的背景
$(this).next().slideUp("slow");//滑动隐藏匹配的元素
}
});
});
</script>
</head>
<body>
<div id="top"></div>
<dl>
<dt>员工管理</dt>
<dd>
<div class="item">添加员工信息</div>
<div class="item">管理员工信息</div>
</dd>
<dt>招聘管理</dt>
<dd>
<div class="item">浏览应聘信息</div>
<div class="item">添加应聘信息</div>
<div class="item">浏览人才库</div>
</dd>
<dt>薪酬管理</dt>
<dd>
<div class="item">薪酬登记</div>
<div class="item">薪酬调整</div>
<div class="item">薪酬查询</div>
</dd>
<dt class="title"><a href="#">退出系统</a></dt>
</dl>
<div id="bottom"></div>
</body>
</html>这段代码中的next()是啥意思？看不明白。是自定义的吗？还是已经规定好的属性或者方法或者参数什么的？
这段代码中的 next() 是 jQuery 库提供的一个内置方法，不是自定义的。
next() 方法的作用
next() 用于获取当前元素的下一个同级元素。在你提供的代码中：
$(this)表示当前被点击的<dt>元素$(this).next()获取这个<dt>元素后面紧邻的<dd>元素这样就实现了点击标题展开/收起对应内容的效果
jQuery 中的 DOM 遍历方法
jQuery 提供了多个类似的 DOM 遍历方法：
next() - 下一个同级元素
prev() - 上一个同级元素
parent() - 父级元素
children() - 所有子元素
原生 JavaScript 的替代方案
如果不使用 jQuery，可以用原生 JavaScript 实现类似功能：
// 相当于 $(this).next()
this.nextElementSibling
// 相当于 $(this).next().is(":hidden")
this.nextElementSibling.style.display === 'none'建议：你可以在浏览器控制台中输入 $("dt").next() 来实时查看这个方法返回的结果，这样能更直观地理解它的工作原理。
那这里的.css("backgroundImage","url(images/title_hide.gif)");
这句代码中的backgroundImage是个啥？也是规定好的吗？还是自定义的？
backgroundImage 是 标准的 CSS 属性名，不是 jQuery 自定义的。
在 jQuery 的 .css() 方法中，你需要使用 标准的 CSS 属性名 来设置样式。background-image 是 CSS 中用于设置背景图片的属性。
为什么代码中写的是 backgroundImage 而不是 background-image？
这是因为 jQuery 在内部做了转换处理：
CSS 标准写法：
background-image（带连字符）jQuery 中的写法：可以使用
"backgroundImage"（驼峰命名）或"background-image"（原始写法）
两种写法都是有效的：
// 驼峰命名（推荐）
.css("backgroundImage", "url(images/title_hide.gif)")
// 或原始写法（也有效）
.css("background-image", "url(images/title_hide.gif)")背景图片路径写法要点
设置背景图片时需要注意路径的正确性：
同级目录：
url(image.jpg)子目录：
url(images/title_hide.gif)上级目录：
url(../images/title_hide.gif)
建议：你可以在浏览器开发者工具中，选中一个元素后直接在样式面板里修改 background-image 属性，实时看到效果，这样能更好地掌握背景图片的设置方法。