首页 > 代码库 > JQ写简单的伸缩菜单(内附效果图和源代码)
JQ写简单的伸缩菜单(内附效果图和源代码)
效果如图:
JQ代码就那么几句,
<!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" xml:lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>伸缩菜单</title> <meta name="keywords" content="关键字列表" /> <meta name="description" content="网页描述" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"> body,p,ul,li{padding:0px;margin:0px;} ul li{list-style:none;} body{font-size:13px;} .menu{ width:210px; margin:50px auto; border:1px solid #ccc; } .menu p{ height:25px; line-height:25px; font-weight:bold; background:#eee; border-bottom:1px solid #ccc; padding-left:5px; cursor:pointer; } .menu ul{display:none;} .menu ul li{ height:24px; line-height:24px; padding-left:5px; } .hide{ display:none; } </style> <script src="http://www.mamicode.com/jquery.js"></script> <script type="text/javascript"> $(function () { $("p").click(function() { //点击当前P标记,使P标记的下一个兄弟ul,隐藏或者显示;除了当前P标记的下一个兄弟ul之外,其他的ul都隐藏。 $(this).next("ul").toggle(1500).siblings(‘ul‘).hide(1500); }); }); </script> </head> <body> <div id="menu" class="menu"> <p>web前端</p> <ul> <li>HTML</li> <li>DIV+CSS</li> <li>JAVASCRIPT</li> <li>jQuery</li> <li>Bootstrap</li> </ul> <p>PHP+MYSQL核心编程</p> <ul> <li>PHP</li> <li>MYSQL</li> <li>HTTP协议</li> <li>PHP绘图技术</li> </ul> <p>PHP高级</p> <ul> <li>XML编程</li> <li>AJAX</li> <li>MVC</li> </ul> </div> </body> </html>
JQ写简单的伸缩菜单(内附效果图和源代码)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。