各位大侠帮忙看看下面的jquery代码。
怎么才能实现：打开第一个菜单其它菜单自动关闭，怎么打开第二个菜单其它的菜单关闭，怎么打开第三个菜单其它的菜单关闭。源码如下：<!DOCTYPEhtmlPUBLIC"-//...
怎么才能实现：打开第一个菜单其它菜单自动关闭，怎么打开第二个菜单其它的菜单关闭，怎么打开第三个菜单其它的菜单关闭。
源码如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css/menu.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<style>
ul,li{ /*清除项目标签的小圆点*/
list-style: none;
}
ul{ /*清除子菜单的缩进*/
padding: 0px;
margin: 0px; /*兼容IE6*/
}
.main{
background-image: url(../images/title.gif);
background-repeat: repeat-x;
width: 140px;
}
li {
background: #EEEEEE; /*设置使用li标签的所有背景*/
}
a {
text-decoration: none; /*取消所有的连接的下划线*/
padding-left: 30px; /*连接左边缩进20个像素*/
display: block;
display: inline-block; /*为了兼容IE*/
width: 110px; /*解决第一级菜单后小半截不是连接区域的问题*/
padding-top: 3px;
padding-bottom: 3px;
}
.main a{
color:#C0C0C0;
background-image: url(../images/collapsed.gif);
background-repeat: no-repeat; /*不重复图片*/
background-position: 3px center;
}
.main li a{ /*设置超级练级的背景颜色，并指定无背景图片*/
color: #000000;
background-image:none;
}
.main ul{ /*设置第二联菜单隐藏*/
display:none;
}
</style>
</head>
<body>
<ul>
<li class="main">
<a href="#">系统管理</a>
<ul>
<li><a href="#">系统信息</a></li>
<li><a href="#">系统设置</a></li>
<li><a href="#">系统日志</a></li>
</ul>
</li>
<li class="main">
<a href="#">设备管理</a>
<ul>
<li><a href="#">设备1</a></li>
<li><a href="#">设备2</a></li>
<li><a href="#">设备3</a></li>
</ul>
</li>
<li class="main">
<a href="#">员工管理</a>
<ul>
<li><a href="#">员工信息</a></li>
<li><a href="#">考勤信息</a></li>
<li><a href="#">工作日志</a></li>
</ul>
</li>
</ul>
<script>
$(document).ready(function(){ //$(document).ready当页面加载完执行该后面的function
//页面中的DOM已经装载完成时，执行的代
$(".main >a").click(function(){
var ulNode=$(this).next("ul");
ulNode.slideToggle("slow").siblings("<ul>").slideUp("slow");
changeIcon($(this));
})
function changeIcon(mainNode) {
if (mainNode) {
if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
mainNode.css("background-image","url('images/expanded.gif')");
} else {
mainNode.css("background-image","url('images/collapsed.gif')");
}
}
}
})
</script>
</body>
</html>
主要就是这一步： ulNode.slideToggle("slow").siblings("<ul>").slideUp("slow");实现不了我说的那个功能 展开
源码如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css/menu.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<style>
ul,li{ /*清除项目标签的小圆点*/
list-style: none;
}
ul{ /*清除子菜单的缩进*/
padding: 0px;
margin: 0px; /*兼容IE6*/
}
.main{
background-image: url(../images/title.gif);
background-repeat: repeat-x;
width: 140px;
}
li {
background: #EEEEEE; /*设置使用li标签的所有背景*/
}
a {
text-decoration: none; /*取消所有的连接的下划线*/
padding-left: 30px; /*连接左边缩进20个像素*/
display: block;
display: inline-block; /*为了兼容IE*/
width: 110px; /*解决第一级菜单后小半截不是连接区域的问题*/
padding-top: 3px;
padding-bottom: 3px;
}
.main a{
color:#C0C0C0;
background-image: url(../images/collapsed.gif);
background-repeat: no-repeat; /*不重复图片*/
background-position: 3px center;
}
.main li a{ /*设置超级练级的背景颜色，并指定无背景图片*/
color: #000000;
background-image:none;
}
.main ul{ /*设置第二联菜单隐藏*/
display:none;
}
</style>
</head>
<body>
<ul>
<li class="main">
<a href="#">系统管理</a>
<ul>
<li><a href="#">系统信息</a></li>
<li><a href="#">系统设置</a></li>
<li><a href="#">系统日志</a></li>
</ul>
</li>
<li class="main">
<a href="#">设备管理</a>
<ul>
<li><a href="#">设备1</a></li>
<li><a href="#">设备2</a></li>
<li><a href="#">设备3</a></li>
</ul>
</li>
<li class="main">
<a href="#">员工管理</a>
<ul>
<li><a href="#">员工信息</a></li>
<li><a href="#">考勤信息</a></li>
<li><a href="#">工作日志</a></li>
</ul>
</li>
</ul>
<script>
$(document).ready(function(){ //$(document).ready当页面加载完执行该后面的function
//页面中的DOM已经装载完成时，执行的代
$(".main >a").click(function(){
var ulNode=$(this).next("ul");
ulNode.slideToggle("slow").siblings("<ul>").slideUp("slow");
changeIcon($(this));
})
function changeIcon(mainNode) {
if (mainNode) {
if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
mainNode.css("background-image","url('images/expanded.gif')");
} else {
mainNode.css("background-image","url('images/collapsed.gif')");
}
}
}
})
</script>
</body>
</html>
主要就是这一步： ulNode.slideToggle("slow").siblings("<ul>").slideUp("slow");实现不了我说的那个功能 展开
2个回答
展开全部
把click方法修改如下就行了,
$(".main >a").click(function(){
var ulNode=$(this).next("ul");
ulNode.slideToggle("slow");
$(".main ul").not(ulNode).slideUp("slow");
changeIcon($(this));
});
$(".main >a").click(function(){
var ulNode=$(this).next("ul");
ulNode.slideToggle("slow");
$(".main ul").not(ulNode).slideUp("slow");
changeIcon($(this));
});
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
siblings是取得其同辈元素的元素集合。
而所谓同辈元素是指共有一个父节点的元素，你的这些<ul>不属于同辈元素。
你可以给你的这些<ul>加一个属性来标记它是否被点开例如：
<ul isopen="false">
然后在根据这个属性来判断ul是否被打开
$(".main >a").click(function(){
var $ul=$(this).next('ul');
if($ul.attr('isopen')=='true'){
$ul.attr('isopen','false').slideUp('slow');
}
else{
$(".main ul[isopen='true']").attr('isopen','false').slideUp('slow');
$ul.attr('isopen','true').slideDown('slow');
}
changeIcon($(this));
});
而所谓同辈元素是指共有一个父节点的元素，你的这些<ul>不属于同辈元素。
你可以给你的这些<ul>加一个属性来标记它是否被点开例如：
<ul isopen="false">
然后在根据这个属性来判断ul是否被打开
$(".main >a").click(function(){
var $ul=$(this).next('ul');
if($ul.attr('isopen')=='true'){
$ul.attr('isopen','false').slideUp('slow');
}
else{
$(".main ul[isopen='true']").attr('isopen','false').slideUp('slow');
$ul.attr('isopen','true').slideDown('slow');
}
changeIcon($(this));
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
