<!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>
