jquery 模拟手风琴效果

最新推荐文章于 2022-10-18 18:27:49 发布

能c能v

最新推荐文章于 2022-10-18 18:27:49 发布

阅读量222

点赞数

分类专栏： jQuery css3 原创

本文链接：https://blog.csdn.net/qq_43391160/article/details/99633469

版权

原创同时被 3 个专栏收录

51 篇文章 0 订阅

订阅专栏

css3

5 篇文章 0 订阅

订阅专栏

jQuery

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			.top{
				width: 100px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				border: 1px solid #CCCCCC;
				cursor: pointer;
				/* margin-bottom: 10px; */
			}
			.top.on{
				color: red;
			}
			
			.btm{
				width: 100px;
				text-align: center;
				line-height: 20px;
				display: none;
			}
			
		</style>
	</head>
	<body>
		
		<div class="top">点我</div>
		<div class="btm">
			<p>被点出来的</p>
			<p>被点出来的</p>
			<p>被点出来的</p>
		</div>
		<div class="top">点我</div>
		<div class="btm">
			<p>被点出来的</p>
			<p>被点出来的</p>
			<p>被点出来的</p>
		</div>
		<div class="top">点我</div>
		<div class="btm">
			<p>被点出来的</p>
			<p>被点出来的</p>
			<p>被点出来的</p>
		</div>
	</body>
	<script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$('.top').click(function(){
			

			if($(this).hasClass('on')){
				
				$(this).removeClass('on');
			}else{
				$(this).addClass('on');
				$(this).siblings().removeClass('on');
				$('.btm').slideUp()
			}
			$(this).next().slideToggle()
		})
	</script>
</html>

能c能v

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 模拟手风琴效果

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <styl...
复制链接

扫一扫

专栏目录