<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>可伸缩的菜单</title> <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script> <style type="text/css"> ul { list-style: none; padding: 5px; width: 210px; border: 1px solid red; } a { text-decoration: none; line-height: 30px; } .menu_style li { border-bottom: 1px solid #666; } </style> <script type="text/javascript"> $(function(){ $("input[name=more_btn]").click(function(){ //索引大于5的项目进行隐藏、显示，not(:last)的意思是不包括最后一行 $("li:gt(5):not(:last)").toggle(); }); }); </script> </head> <body> <div id="menu" class="menu_style"> <ul> <li> <a href="#">手机通讯、数码电器</a> </li> <li> <a href="#">食品饮料、酒水、果蔬</a> </li> <li> <a href="#">进口食品、进口牛奶</a> </li> <li> <a href="#">美容化妆、个人护理</a> </li> <li> <a href="#">母婴用品、个人护理</a> </li> <li> <a href="#">厨卫清洁、纸、清洁剂</a> </li> <li id="menu_07" class="element_hide"> <a href="#">家居家纺、锅具餐具</a> </li> <li id="menu_08" class="element_hide"> <a href="#">生活电器、汽车生活</a> </li> <li id="menu_09" class="element_hide"> <a href="#">电脑、外设、办公用品</a> </li> <li class="btn"> <input name="more_btn" type="button" value="展开或关闭菜单项" /> </li> </ul> </div> </body> </html>
