如何用Jquery语言中的slideDown()和slideUp()方法编写伸缩式菜单栏？
用slideDown()和slideUp()方法编写伸缩式菜单栏，代码如下：
<!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>
<script type="text/javascript" src="JS/jquery-1.12.4.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>伸缩式导航菜单</title>
<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>
</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>
<script type="text/javascript">
$("dt").click(function() {
if ($(this).next("dd").show()) {
$(this).next("dd").slideUp(400);
$(this).css("backgroundImage", "url(images/title_hide.gif)");
}
else {
$(this).next("dd").slideDown(400,function(){
$(this).css("backgroundImage", "url(images/title_show.gif)");
});
}
});
$(".title").click(function() {
$("dt").css("backgroundImage", "url(images/title_hide.gif)");
$("dd").hide(500);
});
</script>
</body>
</html>
其中t代码里只能实现菜单栏的收缩，不能实现菜单栏的伸展。
<script type="text/javascript">
$("dt").click(function() {
if ($(this).next("dd").show()) {
$(this).next("dd").slideUp(400);
$(this).css("backgroundImage", "url(images/title_hide.gif)");
}
else {
$(this).next("dd").slideDown(400,function(){
$(this).css("backgroundImage", "url(images/title_show.gif)");
});
}
});
$(".title").click(function() {
$("dt").css("backgroundImage", "url(images/title_hide.gif)");
$("dd").hide(500);
});
</script>
我用了if语句判断菜单栏的状态，但是只能实现else之前的代码，else之后的实现不了。在一级菜单收缩后点击无法伸展。
运行如下：
用slideToggle就行了，会自动切换状态，示例代码如下
<!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>伸缩式导航菜单</title>
<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;
}
dt{color:#f00}
</style>
</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>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$("dt").click(function () {
var isShow = $(this).next().is(':visible');//判断是否可见用is，不是show方法
$(this).css("backgroundImage", `url(images/title_${isShow ? 'hide' : 'show'}.gif)`);
$(this).next().slideToggle();
});
$(".title").click(function () {
$("dt").css("backgroundImage", "url(images/title_hide.gif)");
$("dd").hide(500);
});
</script>
</body>
</html>
有其他问题可以继续交流~
jQuery判断一个元素是否显示或隐藏是
if (!$(this).next("dd").is(":hidden")) {
你题目的解答代码如下：
$("dt").click(function() {
if (!$(this).next("dd").is(":hidden")) {
$(this).next("dd").slideUp(400);
$(this).css("backgroundImage", "url(images/title_hide.gif)");
}
else {
$(this).next("dd").slideDown(400,function(){
$(this).css("backgroundImage", "url(images/title_show.gif)");
});
}
});
如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!
