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 相关文章推荐
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
详解ES6中的let命令
Apr 05 Javascript
Angular排序实例详解
Jun 28 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 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
PHP6 先修班 JSON实例代码
2008/08/23 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
JS 网站性能优化笔记
2011/05/24 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
php自动加载方式集合
2016/04/04 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
python多进程实现文件下载传输功能
2018/07/28 Python
OpenCV+Python识别车牌和字符分割的实现
2019/01/31 Python
python和php哪个更适合写爬虫
2020/06/22 Python
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
小区门卫岗位职责
2013/12/31 职场文书
超市活动计划书
2014/04/24 职场文书
活动总结书
2014/05/08 职场文书
美容院合作经营协议书
2014/10/10 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
node快速搭建后台的实现步骤
2022/02/18 NodeJs
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers