手风琴案例

最新推荐文章于 2022-11-20 20:53:52 发布

yjx_43750162

最新推荐文章于 2022-11-20 20:53:52 发布

阅读量418

点赞数

本文链接：https://blog.csdn.net/weixin_43750162/article/details/89044805

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			body{
				background: black;
			}
			ul{
				font-size: 18px;
				font-family: "微软雅黑";
				list-style: none;
			}
			li{
				line-height: 30px;
			}
			a{
				display: inline-block;
				width: 120px;
				height: 30px;
				color: white;
				text-decoration: none;
			}
			.wrap>li{
				background-image: url(img/title.gif);
				background-repeat: repeat-x;
				background-size: 100% 100%;
			}
			.wrap>li>a{
				background-image: url(img/collapsed.gif);
				background-repeat: no-repeat;
				background-position-y: center;
				padding-left: 10px;
			}
			.wrap>li>ul{
				background: #eee;
				display: none;
			}
			.wrap>li>ul a{
				color: black;
			}
			.wrap{
				margin: 50px 0px 0px 100px;
				width: 120px;
			}
		</style>
		<script type="text/javascript" src="jquery-1.7.1.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				$('.wrap>li').click(function(){
					$(this).children('ul').slideToggle(500);
					showIcon($(this));
				})
				function showIcon(modeICon){
					if(modeICon.children('a').css('background-image').indexOf('collapsed.gif')>0){
						modeICon.children('a').css('background-image','url(img/expanded.gif)');
					}else{
						modeICon.children('a').css('background-image','url(img/collapsed.gif)');
					}
				}
			})
		</script>
	</head>
	<body>
		<ul class="wrap">
			<li>
				<a href="#">菜单项-1</a>
				<ul>
					<li><a href="#">子菜单1-1</a></li>
					<li><a href="#">子菜单1-2</a></li>
					<li><a href="#">子菜单1-3</a></li>
				</ul>
			</li>
			<li>
				<a href="#">菜单项-2</a>
				<ul>
					<li><a href="#">子菜单2-1</a></li>
					<li><a href="#">子菜单2-2</a></li>
					<li><a href="#">子菜单2-3</a></li>
				</ul>
			</li>
			<li>
				<a href="#">菜单项-3</a>
				<ul>
					<li><a href="#">子菜单3-1</a></li>
					<li><a href="#">子菜单3-2</a></li>
					<li><a href="#">子菜单3-3</a></li>
				</ul>
			</li>
		</ul>
	</body>
</html>