jQuery手风琴菜单.zip资源-CSDN文库

共6个文件

png：2个

css：1个

jpg：1个

版权申诉

javascript

html5

jQuery

184 浏览量 2022-11-21 11:33:17 上传评论收藏 53KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery手风琴菜单.zip （6个子文件）

jQuery手风琴菜单

jQuery手风琴菜单.jpg 16KB

jiaoben10

css

style.css 5KB

img

active.png 303B

icons.png 5KB

index.html 3KB

jquery.min.js 92KB

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content=" " /> <meta name="description" content=" " /> <title>jQuery手风琴菜单_懒人图库</title> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> <style type="text/css"> body{width:500px;margin:0 auto} .footer{margin-top:50px;text-align:center;color:#666;font:bold 14px Arial} .footer a{color:#999;text-decoration:none} #wrapper-250{width:250px;margin:0 auto;} </style> <meta name="robots" content="noindex,follow" /> </head> <body> <div id="wrapper-250"> <ul class="accordion"> <li id="one" class="files"> <a href="#one">My Files495</a> <ul class="sub-menu"> <li><a href="#">01Dropbox42</a></li> <li><a href="#">02Skydrive87</a></li> <li><a href="#">03FTP Server366</a></li> <li><a href="#">04Dropbox1</a></li> <li><a href="#">05Skydrive10</a></li> </ul> </li> <li id="two" class="mail"> <a href="#two">Mail26</a> <ul class="sub-menu"> <li><a href="#">01Hotmail9</a></li> <li><a href="#">02Yahoo14</a></li> </ul> </li> <li id="three" class="cloud"> <a href="#three">Cloud58</a> <ul class="sub-menu"> <li><a href="#">01Connect12</a></li> <li><a href="#">02Profiles19</a></li> <li><a href="#">03Options27</a></li> <li><a href="#">04Connect12</a></li> <li><a href="#">05Profiles19</a></li> <li><a href="#">06Options27</a></li> </ul> </li> <li id="four" class="sign"> <a href="#four">Sign Out</a> <ul class="sub-menu"> <li><a href="#">01Log Out</a></li> <li><a href="#">02Delete Account</a></li> <li><a href="#">03Freeze Account</a></li> </ul> </li> </ul> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // Store variables var accordion_head = $('.accordion > li > a'), accordion_body = $('.accordion li > .sub-menu'); // Open the first tab on load accordion_head.first().addClass('active').next().slideDown('normal'); // Click function accordion_head.on('click', function(event) { // Disable header links event.preventDefault(); // Show and hide the tabs on click if ($(this).attr('class') != 'active'){ accordion_body.slideUp('normal'); $(this).next().stop(true,true).slideToggle('normal'); accordion_head.removeClass('active'); $(this).addClass('active'); } }); }); </script> 来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a> </body> </html>

评论收藏

内容反馈

版权申诉