<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>
$(function(){
$("li").hover(function(){
$(this).stop().animate({width:"152px"},500);
},function(){
$(this).stop().animate({width:"52px"},500);
});
var main=$("ul>a");
main.click(function(){
var sub=$(this);
var item=sub.nextAll("li");
item.toggle("slow");
});
});
</script>
<style type="text/css">
ul{
list-style: none;
}
ul li{
width: 50px;
height: 50px;
overflow: hidden;
text-align: center;
margin: 10px;
display: none;
}
ul li img{
vertical-align: middle;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<center>
<div id="menudiv">
<ul>
<a href="#"><strong>产品信息维护</strong></a>
<li><img src="img/1.jpeg"/><a href="#">查看产品信息</a></li>
<li><img src="img/2.jpeg"/><a href="#">新产品添加</a></li>
<li><img src="img/3.jpeg"/><a href="#">原有产品信息修改</a></li>
<li><img src="img/4.jpeg"/><a href="#">删除产品信息</a></li>
</ul>
<ul>
<a href="#"><strong>销售商信息维护</strong></a>
<li><img src="img/1.jpeg"/><a href="#">查看销售商信息</a></li>
<li><img src="img/2.jpeg"/><a href="#">添加销售商信息</a></li>
<li><img src="img/3.jpeg"/><a href="#">修改销售商信息</a></li>
<li><img src="img/4.jpeg"/><a href="#">删除销售商信息</a></li>
</ul>
</div>
</center>
</body>
</html>
1086
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
