菜单折叠--siblings() slideDown

最新推荐文章于 2021-05-10 08:00:07 发布

ruru7989

最新推荐文章于 2021-05-10 08:00:07 发布

阅读量1.2k

点赞数

分类专栏： Jquery--小知识

本文链接：https://blog.csdn.net/ruru7989/article/details/10430535

版权

Jquery--小知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<%@ 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 xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>菜单折叠</title>
</head>
<body>
<div id="zd">全部折叠</div><div id="zk">全部展开</div>
<div class="w"><h2>Hello</h2>
<span>HHHHHHHH</span>
<div>HHHHHHHH</div>
<div>HHHHHHHH</div>
</div>
<div class="w"><h2>Hello Again</h2>
<div>DDDD</div>
<div>DDDD</div>
<div>DDDD</div>
</div>
<div><h2>And Again</h2></div>
<div>siblings() 是选择同辈元素,$("h2").siblings()是和h2同级的元素</div>
<div>slideDown() 通过使用滑动效果，显示隐藏的被选元素。(down 放下,也就是展开)</div>
<div>slideUp() 通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。(up 折叠起来,也就是隐藏起来的意思)</div>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript">
$(function(){
$('h2').bind('click',function(){
$this = $(this);
if($this.siblings().is(':hidden')){
$this.siblings().slideDown('nomal');
}else if($this.siblings().is(':visible')){
$this.siblings().slideUp('normal');
}
});

$("#zd").click(function(){
$("h2").siblings().slideUp('normal');
});
$("#zk").click(function(){
$("h2").siblings().slideDown('normal');
});
});
</script>
</body>
</html>

ruru7989

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
菜单折叠--siblings() slideDown

pageEncoding="UTF-8"%>菜单折叠 Hello HHHHHHHH HHHHHHHH HHHHHHHH Hello Again DDDD DDDD DDDD And Again$(function(){ $('h2').bind('click',function(){
复制链接

扫一扫

专栏目录