原生js手风琴案例,以及jquery方式

最新推荐文章于 2023-08-29 22:08:46 发布

小桃子~

最新推荐文章于 2023-08-29 22:08:46 发布

阅读量395

点赞数 1

分类专栏： javaScript 文章标签： javascript jquery css

本文链接：https://blog.csdn.net/m0_61692295/article/details/127782585

版权

javaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

首先:
先看看手风琴是什么样子的考虑一下如何实现手风琴的效果,
接下来:
我们来说一下手风琴的实现原理:
1.有自己配置好的一对标签div和span
2.点击一对div时,显示span
3.将其他的div中的span标签隐藏,只显示点击时的div中的span
4.看到这里恭喜你已经了解了手风琴的具体操作啦,我们来看看实际代码吧

1.图片演示

在这里插入图片描述

2.jQuery方式及实现原理

实现原理:
jquery的实现方式:首先先获取到点击元素的this,将点击的this对象的兄弟级下拉,其他的兄弟级收回

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jQuery/jquery-3.6.0.min.js"></script>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			ul{
				width: 200px;
				text-align: center;
				list-style: none;
			}
			li{
				border: 1px solid #999;
				background-color: #e0ecff;
			}
			span{
				display: block;
				height: 20px;
				line-height: 20px;
				font-size: 16px;
				border-bottom: 1px solid #ccc;
				cursor: pointer;
			}
			div{
				height: 200px;
				background-color: #fff;
				display: none;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<span>标题1</span>
				<div>我是弹出来的div1</div>
			</li>
			<li>
				<span>标题2</span>
				<div>我是弹出来的div2</div>
			</li>
			<li>
				<span>标题3</span>
				<div>我是弹出来的div3</div>
			</li>
			<li>
				<span>标题4</span>
				<div>我是弹出来的div4</div>
			</li>
		</ul>
		
		<script>
			$("span").click(function(){
				//next() --- 获取当前元素的下一个兄弟元素
				$(this).next().slideDown(1000);
				$(this).parent().siblings().children("div").slideUp(1000);
			})
			
		</script>
	</body>
</html>

3.原生js的实现原理及代码

实现原理:
点击那个父级元素让那个父级元素的第一个子级元素显示,其他的隐藏.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jQuery/jquery-3.6.0.min.js"></script>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			ul{
				width: 200px;
				text-align: center;
				list-style: none;
			}
			li{
				border: 1px solid #999;
				background-color: #e0ecff;
			}
			span{
				display: block;
				height: 20px;
				line-height: 20px;
				font-size: 16px;
				border-bottom: 1px solid #ccc;
				cursor: pointer;
			}
			div{
				height: 200px;
				background-color: #fff;
				display: none;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<span>标题1</span>
				<div>我是弹出来的div1</div>
			</li>
			<li>
				<span>标题2</span>
				<div>我是弹出来的div2</div>
			</li>
			<li>
				<span>标题3</span>
				<div>我是弹出来的div3</div>
			</li>
			<li>
				<span>标题4</span>
				<div>我是弹出来的div4</div>
			</li>
		</ul>
		
		<script>
			 var spanobj =document.getElementsByTagName("span");
			 for(var i=0;i<spanobj.length;i++){
			 	spanobj[i].onclick = function(){
			 		for(var j=0;j<spanobj.length;j++){
			 		//nextElementSibling 获取父级中的第一个子元素
						spanobj[j].nextElementSibling.style.display = "none"
						this.nextElementSibling.style.display = "block"
					}
				}
			}
		</script>
	</body>
</html>