JQuery实现折叠菜单

long546324

浏览: 206662 次
性别:
来自: 云南

最近访客更多访客>>

mzguodong

as84568326

扁舟垂钓

gxpcw

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery

jQuery CSS HTML XHTML

<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<style type="text/css">
.menu_list {
	width: 150px;
}
.menu_head {
	padding: 8px 10px;
	cursor: pointer;
	position: relative;
	margin:1px;
    font-weight:bold;
    background: #93cdff;
}
.menu_body {
	display:none;
}
.menu_body a 
{
	padding:8px 0px;
	display:block;
	color:#006699;
	background-color:#EFEFEF;
	 padding-left:10px;
	font-weight:bold;
	text-decoration:none;
}
 .menu_body a:hover {
	color:#7fb2f4;
	background-color:#dfdfdf;
	text-decoration:underline;
}
</style>
<script type="text/javascript">
 $(function(){
            $("#firstpane p.menu_head").click(function()
            {
                $(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");           
            });
            $("#firstpane p.menu_head").mouseover(function()
            {
               $(this).css({background:"#2286c6"});
            });
            $("#firstpane p.menu_head").mouseout(function()
            {
               $(this).css({background:"#93cdff"});
            });
        });s
</script>
</head>

<body>
<div id="firstpane" class="menu_list">
  <p class="menu_head">菜单1</p>
    <div class="menu_body">
	<a href="#">子菜单1</a>
	<a href="#">子菜单2</a>
	<a href="#">子菜单3</a>
    </div>
 <p class="menu_head">菜单2</p>
    <div class="menu_body">
	<a href="#">子菜单1</a>
	<a href="#">子菜单2</a>
	<a href="#">子菜单3</a>
    </div>
<p class="menu_head">菜单3</p>
    <div class="menu_body">
	<a href="#">子菜单1</a>
	<a href="#">子菜单2</a>
	<a href="#">子菜单3</a>
    </div>
<p class="menu_head">菜单4</p>
    <div class="menu_body">
	<a href="#">子菜单1</a>
	<a href="#">子菜单2</a>
	<a href="#">子菜单3</a>
    </div>
</div>
</body>
</html>

折叠菜单.rar (29.4 KB)
下载次数: 1554

2
顶

2
踩

分享到：

AJAX应用的五个步骤 | .net中实现图片的横向(竖直)滚动（轮播）

2009-05-01 13:52
浏览 12947
评论(6)
查看更多

6 楼 tbxgoo123 2011-01-10

kakilu 写道

请问，为什么每次点完菜单，菜单都要抖一下啊？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 在前面加个这个

5 楼 yuge2009 2010-10-26

不错的东西，学习了

4 楼 kakilu 2010-08-10

请问，为什么每次点完菜单，菜单都要抖一下啊？

3 楼 long546324 2010-04-07

wa20463165 写道

哥们很强，不过问下，能不能也让他同时支持多个打开的菜单显示啊

把下面这句修改一下就可以实现同时支持多个打开的菜单显示了
$(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
改成：
$(this).next("div.menu_body").slideToggle(300)；

2 楼 wa20463165 2010-04-06

哥们很强，不过问下，能不能也让他同时支持多个打开的菜单显示啊

1 楼远去的渡口 2009-12-09

收藏一下哦，很好，谢了

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论