您的位置:首页 > Web前端 > JQuery

基于jquery实现的折叠式菜单

2016-07-15 00:00 295 查看

1、源码

以下是源码,很方便的能引入的自己项目中

<!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>jqueryTest</title>
<script type="text/javascript" src="../js/jquery-1.3.2.js" ></script>
<style type="text/css">
body,div{ margin:0;padding:0;}
#menu {width:200px;}
.has_children{
background:url(../image/bg_title.gif) no-repeat;
padding:8px 0 8px 25px;
font-weight:bold;
cursor:pointer;
margin:0;
display:block;
}
.highlight{
background:url(../image/bg_title_visited.gif) no-repeat;
padding:8px 0 8px 25px;
color:#f59000;
font-weight:bold;
cursor:auto;
margin:0;
display:block;
}
.highlight a{
margin-top:10px;
}
a:hover {
color: #000000;
background-color:#dfdfdf;
text-decoration:underline;
font-weight:normal;
margin-top:10px;
}
.has_children a{
display:none;
width:auto;
}
</style>
<script type="text/javascript">
$(function(){
$(".has_children").click( function(){ //元素
$(this).siblings().filter(".highlight").children("a").slideToggle("normal");
$(this).end().siblings().filter(".highlight").children("a").slideToggle("normal");
if($(this).children("a").is(":hidden"))//隐藏
{
$(this).children("a").slideToggle("normal");//slideToggle 隐藏或者显示
$(this).removeClass("has_children");
$(this).addClass("highlight");
}else{
$(this).children("a").slideToggle("normal");//slideToggle 隐藏或者显示
$(this).removeClass("highlight");
$(this).addClass("has_children");
}
$(this).siblings().filter(".highlight").removeClass("highlight").addClass("has_children");
});

});
</script>
</head>

<body>
<div id="menu">
<div class="has_children">
<span>研发中心</span>
<a href="#">研发中心一部</a>
<a href="#">研发中心二部</a>
<a href="#">研发中心三部</a>
<a href="#">研发中心四部</a>
<a href="#">研发中心五部</a>
</div>
<div class="has_children">
<span>销售部</span>
<a href="#">华北区</a>
<a href="#">华南区</a>
<a href="#">东北区</a>
<a href="#">江南区</a>
</div>
<div class="has_children">
<span>行政部</span>
<a href="#">行政部所有人员</a>
<a href="#">行政部所有人1员</a>
<a href="#">行政部所有人2员</a>
</div>
<div class="has_children">
<span>行政1部</span>
<a href="#">行政部所有人1员</a>
<a href="#">行政部所有人11员</a>
<a href="#">行政部所有人12员</a>
</div>
</div>
</body>
</html>


2、资源图片

所需要的两张图片





3、执行效果

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery 折叠菜单