jQuery实现的简单折叠菜单(折叠面板)效果代码
本文实例讲述了jQuery实现的简单折叠菜单(折叠面板)效果代码。分享给大家供大家参考。具体如下：
这是一款基于jQuery实现的折叠菜单，可展开一些内容，实际上称它为一个面板比较好，是一个折叠面板，使用了jQuery1.6.2插件。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-simple-toggle-zd-menu-codes/
具体代码如下：
<!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>
<title>jQuery 折叠菜单 by Sam Zhang</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style type="text/css">
* { margin:0px; padding:0px; }
body { background:transparent url('images/bg.gif') repeat scroll left top;font-size:14px; }
ul, li, p, h1, h2, h3, div, label, input, form { list-style:none; padding:0px; margin:0px; }
#header { width:600px; margin:20px auto 0; color:#ffffff; background:transparent url('images/header1.jpg') repeat-x scroll left top; height:90px; line-height:90px; font-size:20px; overflow:hidden; }
#header p { padding-left:15px; font-weight:bold; }
#header p span.date { float:right; padding-right:15px; font-size:14px; padding-top:10px; font-weight:normal; }
.content { width:596px; _height:430px; min-height:430px; margin:0 auto; border:2px solid #AAAA00; border-top:none; background-color:#FFFFFF; overflow:hidden; }
.toggle { width:450px; margin:20px auto; }
.toggle dl dt { background:#F4FFF4 url('images/bg_toggle_up.gif') no-repeat scroll 8px 14px; height:40px; width:450px; line-height:40px; font-size:16px; font-weight:bold; color:#006600; cursor:pointer; margin:8px 0; padding-left:25px; display:block; }
.toggle dl dt.current { background:#F4FFF4 url('images/bg_toggle_down.gif') no-repeat scroll 8px 14px; }
.toggle dl dd { padding-left:10px; line-height:24px; }
.toggle dl dd h2 { font-size:15px; }
.toggle dl dd ul { padding-bottom:12px; }
.toggle dl dd ul li { list-style:decimal inside none; }
</style>
<script type="text/javascript">
$(function(){
$(".toggle dl dd").hide();
$(".toggle dl dt").click(function(){
$(".toggle dl dd").not($(this).next()).hide();
$(".toggle dl dt").not($(this).next()).removeClass("current");
$(this).next().slideToggle(500);
$(this).toggleClass("current");
});
});
</script>
</head>
<body>
<div id="header">
<p><span class="date">时间：2010/8/3</span>jQuery 折叠菜单<span style="font-size:14px;padding:10px 0 0 5px;">By Sam Zhang</span>
</div>
<div class="content">
<div class="toggle">
<dl>
<dt>web 前端开发工程师（工作地点:上海、广州）</dt>
<dd>
<h2>工作职责：</h2>
<ul>
<li>简单分析用户数据，整理用户需求导向；</li>
<li>对在用户浏览器端的最终视觉呈现负责；</li>
<li>和后台工程师一起研讨技术实现方案，制定服务接口等；</li>
</ul>
<h2>职位要求：</h2>
<ul>
<li>本科以上学历，习惯阅读英文原版技术文档和书籍；</li>
<li>对可用性、可访问性等相关知识有深刻的认识和实践经验；</li>
<li>掌握至少一门非前端脚本开发语言（如PHP/Python等）；</li>
</ul>
</dd>
<dt>web 前端开发工程师（工作地点:上海、广州）</dt>
<dd>
<h2>工作职责：</h2>
<ul>
<li>对在用户浏览器端的最终视觉呈现负责；</li>
<li>持续的优化前端体验和页面响应速度；</li>
<li>和后台工程师一起研讨技术实现方案，制定服务接口等；</li>
</ul>
<h2>职位要求：</h2>
<ul>
<li>本科以上学历，习惯阅读英文原版技术文档和书籍；</li>
<li>熟悉至少一种JS框架（如YUI/JQuery等），我们目前主要使用YUI；</li>
<li>掌握至少一门非前端脚本开发语言（如PHP/Python等）；</li>
</ul>
</dd>
<dt>web 前端开发工程师（工作地点:上海、广州）</dt>
<dd>
<h2>工作职责：</h2>
<ul>
<li>简单分析用户数据，整理用户需求导向；</li>
<li>对在用户浏览器端的最终视觉呈现负责；</li>
<li>使用HTML/CSS/Javascript开发符合W3C标准的网站前端页面；</li>
</ul>
<h2>职位要求：</h2>
<ul>
<li>精通XHTML/CSS/Javascript等前端技术，兼容多种浏览器的代码；</li>
<li>熟悉至少一种JS框架（如YUI/JQuery等），我们目前主要使用YUI；</li>
<li>掌握至少一门非前端脚本开发语言（如PHP/Python等）；</li>
</ul>
</dd>
</dl>
</div>
</div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。
相关推荐
-
Mootools 1.2 手风琴（Accordion）教程
创建和配置一个基本的手风琴很简单,但是你一定要认真看完全文,因为更多的高级选项可能有一些复杂. 基础知识 创建一个新的手风琴 要创建一个新的手风琴,你需要选择一些成对的元素--包含标题和内容.因此,首先,需要给每一个标题和每一个内容块分别指定一个css类名: 参考代码: 复制代码 代码如下: <h3 class="togglers">Toggle 1</h3> <p class="elements">Here is the con
-
jquery实现简单合拢与展开网页面板的方法
本文实例讲述了jquery实现简单合拢与展开网页面板的方法.分享给大家供大家参考.具体如下: 这是一款网页上常见的合拢(收缩).伸展面板代码,使用了jQuery插件,代码更加简化,点击面板的标题栏即可折叠.或展开这个层,是网上很流行的效果,由此可扩展出的功能还真挺多,只要动脑筋,一定能做出来. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-hidden-show-web-table-codes/ 具体代码如下: <!
-
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
先给大家看下效果图,效果图展示如下: 关键代码如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>首页</title> &l
-
学习ExtJS accordion布局
一.Accordion布局由类Ext.layout.Accordion定义,表示可折叠的布局,点击每一个子元素的头部名称或右边的按钮,则会展开该面板,并收缩其它已经展开的面板. layoutConfig:true表示在执行展开折叠时启动动画效果,默认值为false. 二.应用举例 复制代码 代码如下: Ext.onReady(function(){ var _panel = new Ext.Panel({ title:"人员信息", renderTo:Ext.getBody(), fr
-
基于jQuery实现Accordion手风琴自定义插件
目前网上有很多各种各样的手风琴插件,但是没有一个完整实现了的侧菜单,今天写了一个可以无限子节点的手风琴侧菜单,有需要的可以参考一下,有什么好的想法可以留言.(没有经过彻底测试,不过问题应该不大) 下面老规矩,直接贴代码: (function ($) { 'use strict'; var defaults = { url: null, param: {}, data: {}, fill: true, level_space: 15, onitemclick: null, style: { hea
-
jQuery实现可展开合拢的手风琴面板菜单
本文实例讲述了jQuery实现可展开合拢的手风琴面板菜单.分享给大家供大家参考.具体如下: 这是一款大家都常见的折叠菜单,手风琴折叠面板,会展开和合拢,带点Flash动画效果,修改时请注意: slideUp : 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数.这个动画效果只调整元素的高度,可以使匹配的元素以"滑动"的方式隐藏起来. slideDown: 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数.这个动
-
jQuery EasyUI API 中文文档 - Panel面板
用$.fn.panel.defaults重写defaults.用法示例 创建Panel 1. 经由标记创建Panel 从标记创建Panel更容易.把 'easyui-panel' 类添加到<div/>标记. 复制代码 代码如下: <div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;b
-
jQuery EasyUI Accordion可伸缩面板组件使用详解
Accordion 可伸缩面板组件,基于panel,示例如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type=
-
ajaxToolkit:AccordionPane演示与应用实例
一个展开收合的ajaxToolkit:AccordionPane控件.Insus.NET在专案有用到它. 因为它可以节省显示空间.不过有点不足,就是用户刚开始使用,需要记得每个AccordionPane内容.或是需要使用一个显而可见的名字.下面的演示中,只是两个收合AccordionPane,如果多个的话,就会有上面提及的问题. 下面是HTML:ajaxToolkit:Accordion 复制代码 代码如下: <ajaxToolkit:Accordion ID="Accordion1&qu
-
jquery实现的Accordion折叠面板效果代码
本文实例讲述了jquery实现的Accordion折叠面板效果代码.分享给大家供大家参考.具体如下: 这是一款Accordion折叠面板,折叠菜单代码,简单Accordion效果,采用CSS与jQuery实现,鼠标点击后展开,再次点击后折叠起来.是网上很常用的手风琴效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-Simple-Accordion-style-codes/ 具体代码如下: <!DOCTYPE html PUBL