jQuery滑动效果（点击展开div面板，当点击其他时当前div面板展开同时上一个div面板隐藏）

最新推荐文章于 2022-07-18 19:17:52 发布

置顶聆听HJ

最新推荐文章于 2022-07-18 19:17:52 发布

阅读量566

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_41542329/article/details/103070629

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

slideUp() 方法：通过使用滑动效果，隐藏被选元素。

slideDown() 方法：通过使用滑动效果，显示隐藏的被选元素。

children() 方法：返回被选元素的所有直接子元素。

next() 方法：获得匹配元素集合中每个元素紧邻的同胞元素。

parent() 方法：获得当前匹配元素集合中每个元素的父元素。

siblings()方法：获得匹配集合中每个元素的同胞。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
	ul{
		list-style:none;
	}
	div{
		height:160px;
		width:200px;
		background: green;
		display: none;
	}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/3DT/js/jquery-2.1.1.js"></script>
<script type="text/javascript">
	$(function(){ 
		$(".aaa").click(function(){
			$(this).next().slideDown(1000).parent().siblings().children("div").slideUp(1000);
		})
	});
</script>
</head>
<body>
	<ul>
		<li>
			<span class="aaa"><a>点击展开div内容01</a></span>
			<div>内容1111111111</div>
		</li>
		<li>
			<span class="aaa"><a>点击展开div内容02</a></span>
			<div>内容222222222</div>
		</li>
	</ul>
</body>
</html>

效果图：（滑动效果得自己运行此代码）

点击“点击展开div内容01”时：

点击“点击展开div内容02”时：

聆听HJ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jQuery滑动效果（点击展开div面板，当点击其他时当前div面板展开同时上一个div面板隐藏）

slideUp() 方法：通过使用滑动效果，隐藏被选元素。slideDown() 方法：通过使用滑动效果，显示隐藏的被选元素。children() 方法：返回被选元素的所有直接子元素。next() 方法：获得匹配元素集合中每个元素紧邻的同胞元素。parent() 方法：获得当前匹配元素集合中每个元素的父元素。siblings()方法：获得匹配集合中每个元素的同胞。&lt...
复制链接

扫一扫

专栏目录