手风琴

Posted longhua-0

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手风琴相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>shoufengqin</title>
	<style type="text/css">
		*{
			margin:0;
			padding: 0;
		}
		div{
			margin-left: 100px;
			margin-top: 100px;
			width: 500px;
			height: 200px;
			border: 2px solid red;
		}
		ul{
			overflow: hidden;
			height: 200px;
		}
		li{
			float: left;
			height: 200px;
			list-style: none;
		}
		h3{
			float: left;
			width: 50px;
			height: 200px;
			border: 2px solid blue;
		}
		img{
			width: 0px;
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<div>
		<ul>
			<li><h3>1</h3><img src="images/03.jpg"></li>
			<li><h3>2</h3><img src="images/4.jpg"></li>
			<li><h3>3</h3><img src="images/6.jpg"></li>
			<li><h3>4</h3><img src="images/7.jpg"></li>
			<li><h3>5</h3><img src="images/6.jpg"></li>
			<li><h3>6</h3><img  class="img" src=""></li>
		</ul>
	</div>
	<script type="text/javascript">
		var lis = document.querySelectorAll("li");
		var imgs = document.querySelectorAll("img");
		for(i = 0;i < lis.length;i++){
			lis[i].onclick = function () {
				for (var i = 0; i < lis.length; i++) {
					imgs[i].style.width = "0px";
				}
				this.querySelector("img").style.width = "200px";
			}
		}
	</script>
</body>
</html>

 

以上是关于手风琴的主要内容，如果未能解决你的问题，请参考以下文章

jquery实现比较靠谱的手风琴代码

纯js代码实现手风琴特效

如何通过在 cookie 中保存位置来制作手风琴菜单（包含代码）

jQuery+Bootstrap手风琴折叠菜单代码

为啥你需要在下面的引导手风琴代码中显示 fontawesome chevron 的 "::before" css 修饰符

js 手风琴菜单折叠要用到列表浮动吗