jQuery 折叠菜单，折叠面板，点击睁开紧缩

发布时间：2018-08-14 00:47:53 所属栏目：创业来源：站长网

导读：jQuery 折叠菜单，折叠面板，点击睁开紧缩，可睁开一些内容，现实上称它为一个面板较量好，是一个折叠面板，行使了jQuery1.4插件。为办理一些网页殊效运行后不能表现结果（譬喻：jQuery则必要革新）题目，猛火出格新增网页版演示网页演示：猛击此处运行

　　jQuery 折叠菜单，折叠面板，点击睁开紧缩，可睁开一些内容，现实上称它为一个面板较量好，是一个折叠面板，行使了jQuery1.4插件。

　　为办理一些网页殊效运行后不能表现结果（譬喻：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="/uploads/common/js/jquery-1.4.2.min.js"></script> <style type="text/css"> * { margin:0px; padding:0px; } body { background:transparent url('/uploads/allimg/1102/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('/uploads/allimg/1102/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('/uploads/allimg/1102/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('/uploads/allimg/1102/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"); }); }); // 猛火網 liehuo.net 接待复制,拒绝恶意收罗ｌｉｅｈｕｏ．ｎｅｔ </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/<b>Python</b>等）；</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/<b>Java</b>script开拓切合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> <br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如