JQ写简单的伸缩菜单（内附效果图和源代码）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="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写简单的伸缩菜单（内附效果图和源代码）的主要内容，如果未能解决你的问题，请参考以下文章
WordPress用JavaScript和CSS实现二级菜单展开手风琴效果