jQuery实现的简单折叠菜单(折叠面板)效果代码


Posted in Javascript onSeptember 16, 2015

本文实例讲述了jQuery实现的简单折叠菜单(折叠面板)效果代码。分享给大家供大家参考。具体如下:

这是一款基于jQuery实现的折叠菜单,可展开一些内容,实际上称它为一个面板比较好,是一个折叠面板,使用了jQuery1.6.2插件。

运行效果截图如下:

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>
<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程序设计有所帮助。

Javascript 相关文章推荐
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
JS扩展方法实例分析
Apr 15 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 Javascript
JS数组的常用方法整理
Mar 31 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 #Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 #Javascript
jQuery实现图片轮播特效代码分享
Sep 15 #Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 #Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 #Javascript
JQuery实现图片轮播效果
Sep 15 #Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 #Javascript
You might like
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
Django中URL的参数传递的实现
2019/08/04 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
python urllib和urllib3知识点总结
2021/02/08 Python
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
即兴演讲稿
2014/01/04 职场文书
简历自我评价怎么写呢?
2014/01/06 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
书香校园活动方案
2014/02/28 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
法人授权委托书样本
2014/09/19 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS