master

分支 (2)

管理

管理

master

beta

js-common-summary
/
5-手风琴.html

<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>常用组件</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
	</head>
	<body>

		<div id="lizhili">
			<li>
				<img src="img/pic2.jpg" alt="">
			</li>
			<li>
				<img src="img/pic3.jpg" alt="">
			</li>
			<li>
				<img src="img/pic4.jpg" alt="">
			</li>
			<li>
				<img src="img/pic5.jpg" alt="">
			</li>
			<li class="active">
				<img src="img/pic6.jpg" alt="">
			</li>
		</div>

		<style>
			li{
				list-style: none;
			}
			#lizhili{
				margin: 100px auto;
				width: 860px;
				height: 290px;
				box-shadow: 0 0 8px #cecece;
				display: flex;
			}
			#lizhili li{
				width: 80px;
				overflow: hidden;
				transition: all .5s;
			}
			#lizhili li.active{
				width: 540px;
			}
		</style>

		<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
		<script src="js/lizhili.js"></script>
		<script>
			//移入
			// $("#lizhili li").mouseenter(function(){
			// 	let index=$(this).index()
			// 	$("#lizhili li").eq(index).addClass('active').siblings().removeClass('active')
			// })

			//点击
			$("#lizhili li").click(function(){
				let index=$(this).index()
				$("#lizhili li").eq(index).addClass('active').siblings().removeClass('active')
			})

		</script>


	</body>
</html>