用jquery实现的简单树状菜单,主要使用了jQuery的nextAll()(查找当前元素之后所有的同辈元素)与toggle()(切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。)方法。
- <html>
- <head>
- <title>服装分类管理</title>
- <link type="text/css" rel="stylesheet" href="shop.css">
- <script type="text/javascript" src="jquery1.4.2.js"></script>
- <script>
- $(function(){
- var $p=$("ul>p");
- $p.click(function(){
- //alert("fdf");
- $(this).nextAll("li").toggle();
- });
- });
- </script>
- </head>
- <body>
- <h1 align="center">服装分类管理</h1>
- <hr color=blue>
- <div align="center">
- <ul>
- <p>男装</p>
- <li><a href="http://shop61896089.taobao.com/">衬 衣</a></li>
- <li><a href="http://shop61896089.taobao.com/">T 恤</a></li>
- <li><a href="http://shop61896089.taobao.com/">运动装</a></li>
- <li><a href="http://shop61896089.taobao.com/">西装</a></li>
- </ul>
- <ul>
- <p>女装</p>
- <li><a href="http://shop61896089.taobao.com/">衬 衣</a></li>
- <li><a href="http://shop61896089.taobao.com/">T 恤</a></li>
- <li><a href="http://shop61896089.taobao.com/">夏日凉裙</a></li>
- <li><a href="http://shop61896089.taobao.com/">职业装</a></li>
- </ul>
- <ul>
- <p>童装</p>
- <li><a href="http://shop61896089.taobao.com/">衬 衣</a></li>
- <li><a href="http://shop61896089.taobao.com/">T 恤</a></li>
- <li><a href="http://shop61896089.taobao.com/">牛仔裤</a></li>
- <li><a href="http://shop61896089.taobao.com/">小背心</a></li>
- </ul>
- </div>
- </body>
- </html>