js题库-2{手风琴的制作？ “jQuery” 或 “原生js”}

最新推荐文章于 2024-05-12 22:40:26 发布

漠媂

最新推荐文章于 2024-05-12 22:40:26 发布

阅读量146

点赞数 2

分类专栏： js题库文章标签： javascript jquery css

本文链接：https://blog.csdn.net/AAAXEC/article/details/127795371

版权

js题库专栏收录该内容

3 篇文章 0 订阅

订阅专栏

完成HTML和CSS样式的布局：

	<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>
	</body>
	<style>
			* {
				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>

原生js方式：

点击它的父级元素让它父级元素的第一个子级元素显示,其他的隐藏
nextElementSibling 获取父级中的第一个子元素

<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++){
			spanobj[j].nextElementSibling.style.display = "none"
			this.nextElementSibling.style.display = "block"
		}
	}
}
</script>

jQuery方式：

首先先获取到点击元素的this,将点击的this对象的兄弟级下拉,其他的兄弟级收回
next() — 获取当前元素的下一个兄弟元素

<script>
	$("span").click(function(){
		$(this).next().slideDown(1000);
		$(this).parent().siblings().children("div").slideUp(1000);
	})
</script>

漠媂

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js题库-2{手风琴的制作？ “jQuery” 或 “原生js”}

首先先获取到点击元素的this,将点击的this对象的兄弟级下拉,其他的兄弟级收回。nextElementSibling 获取父级中的第一个子元素。点击它的父级元素让它父级元素的第一个子级元素显示,其他的隐藏。next() — 获取当前元素的下一个兄弟元素。
复制链接

扫一扫