`
long546324
  • 浏览: 206643 次
  • 性别: Icon_minigender_1
  • 来自: 云南
社区版块
存档分类
最新评论

JQuery实现折叠菜单

阅读更多
<!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>
2
2
分享到:
评论
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  
收藏一下哦,很好,谢了

相关推荐

    jQuery实现折叠菜单 非常简单

    通过以上步骤,我们就可以创建一个基本的jQuery折叠菜单。然而,根据实际需求,你可能还需要添加更多的定制功能,如过渡动画、自定义样式或响应式设计。总的来说,jQuery提供了一种灵活且高效的方式来实现这种常见的...

    jquery折叠菜单

    本主题主要关注如何使用jQuery实现一种常见的功能——竖状折叠菜单。 首先,理解折叠菜单的概念。折叠菜单是一种节省空间的导航结构,尤其适用于移动设备或页面内容丰富的网站。它允许用户点击一个按钮或链接来展开...

    基于jQuery实现简单的折叠菜单效果

    jQuery实现折叠菜单是前端开发中常见的交互效果之一,其主要目的是为了节省页面空间,将用户不常用或信息量较大的菜单项隐藏起来,在需要时通过用户操作展开查看。jQuery作为一个轻量级的JavaScript库,因其简便易用...

    jquery实现折叠菜单效果【推荐】

    jQuery 是一个广泛使用的JavaScript库,它提供了丰富的API来简化DOM操作、事件处理和动画效果,其中包括实现折叠菜单的功能。本文将深入讲解如何使用jQuery实现折叠菜单效果。 首先,我们要了解折叠菜单的基本原理...

    jQuery多级折叠菜单

    **jQuery多级折叠菜单**是Web开发中常见的一种交互元素,尤其在网站导航或内容分类中广泛应用。这种菜单能够帮助用户高效地浏览和探索复杂的层级结构。jQuery库因其简洁的API和强大的DOM操作功能,成为了实现此类...

    jquery折叠式菜单实现

    在本文中,我们将深入探讨如何使用jQuery来实现折叠式菜单,并结合CSS技术创建自增长圆角背景。jQuery是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得网页交互更加丰富和动态。 首先,让...

    jquery展开折叠菜单插件

    以下是一个简单的展开折叠菜单实现: ```html 菜单1 ;"&gt; 子菜单1 子菜单2 菜单2 ;"&gt; 子菜单3 子菜单4 $(document).ready(function() { $('.parent').click(function(e) { e....

    Jquery折叠菜单

    要实现一个jQuery折叠菜单,首先需要理解基本的HTML结构。一个简单的折叠菜单通常由一系列的`&lt;ul&gt;`和`&lt;li&gt;`元素组成,其中`&lt;li&gt;`元素可能包含子菜单。例如: ```html 菜单1 &lt;li&gt;&lt;a href="#"&gt;子菜单1-1&lt;/a&gt;&lt;/...

    Jquery三级折叠菜单示例

    本示例主要探讨如何使用`Jquery`实现一个三级折叠菜单,提升用户体验。 首先,我们需要了解`Jquery`的基本用法。`Jquery`通过 `$` 符号来选择元素,如 `$("#id")` 选择ID为`id`的元素,`$(".class")` 选择所有类名...

    JavaScript自定义折叠菜单和使用Jquery函数库创建折叠菜单

    在JavaScript和jQuery的世界里,创建折叠菜单是一种常见的交互设计,它可以有效地组织和展示大量信息,同时保持页面的整洁。在本文中,我们将深入探讨如何利用这两种强大的技术来实现自定义折叠菜单。 首先,让我们...

    HTML jquery实现左侧菜单折叠

    然后,我们可以使用jQuery来编写JavaScript代码,实现菜单的折叠功能。首先,我们需要为菜单项添加一个点击事件监听器,并通过CSS类来控制子菜单的显示和隐藏。例如,我们可以添加一个`.collapsed`类,当该类存在时...

    使用repeater jquery实现的三级可折叠树形菜单

    这里我们关注的是“使用repeater jQuery实现的三级可折叠树形菜单”,这是一个高效且灵活的方法来构建这种功能。下面将详细介绍这个主题。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和...

    jQuery多级折叠展开树形菜单代码

    jQuery库提供了丰富的API和插件,使得实现多级折叠展开的树形菜单变得非常简单。这款"jQuery多级折叠展开树形菜单代码"就是一个很好的实例,它可以帮助开发者快速构建具有交互性的树状导航。 首先,我们要理解...

    JQuery实现菜单折叠效果源码 JQueryAchieveEffectMenu.rar

    JQuery实现菜单折叠效果源码 源码描述: 一、源码特点 1、jQuery实现菜单折叠效果,可实现菜单折叠,欢迎下载 二、注意事项 1、开发环境为Visual Studio 2013,使用.net 4.0开发。

    jQuery可折叠图标菜单 jQuery可折叠图标菜单网页特效.zip

    接下来是JavaScript部分,jQuery库使得实现可折叠菜单变得更加简单。通常,会为图标或按钮绑定`click`事件监听器,当用户点击时,触发相应的展开或收起功能。这通常通过修改元素的`display` CSS属性来完成,或者利用...

    JQuery实现折叠式菜单的详细代码

    1:点菜单项,每个子菜单项都可显示 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;30秦甜甜_实训13-2_2_180701802230_18计算机2班&lt;/title&gt; &lt;/head&gt...

    jQuery多级树形分类折叠菜单.zip

    《jQuery实现多级树形分类折叠菜单》 在网页设计中,树形菜单是一种常见的组织信息的方式,尤其在展示层级关系复杂的数据时更为适用。jQuery作为一款轻量级的JavaScript库,提供了丰富的功能来简化DOM操作,使得...

Global site tag (gtag.js) - Google Analytics