jQuery实现的简单折叠菜单(折叠面板)效果代码
网络编程 2021-07-04 21:03www.168986.cn编程入门
这篇文章主要介绍了jQuery实现的简单折叠菜单(折叠面板)效果代码,涉及jQuery中slideToggle与toggleClass方法的灵活使用技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现的简单折叠菜单(折叠面板)效果代码。分享给大家供大家参考。具体如下:
这是一款基于jQuery实现的折叠菜单,可展开一些内容,实际上称它为一个面板比较好,是一个折叠面板,使用了jQuery1.6.2插件。
运行效果截图如下:
在线演示地址如下:
具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://.w3./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 ;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 ; 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-:10px; font-weight:normal; } .content { width:596px; _height:430px; min-height:430px; margin:0 auto; border:2px solid #AAAA00; border-: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程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程