文档章节

菜单折叠--siblings() slideDown

陈爱茹cx1992
 陈爱茹cx1992
发布于 2016/07/26 17:36
字数 256
阅读 10
收藏 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>

本文转载自:http://blog.csdn.net/ruru7989/article/details/10430535

共有 人打赏支持
陈爱茹cx1992
粉丝 0
博文 59
码字总数 0
作品 0
济南
程序员
jquery实现类似以前凡客诚品右侧图文切换结合效果

终于公司的新闻发布会弄好了,据说反响不错,70多家媒体,排场蛮大的。 现在又得重新回到开发中,新版的商城需要改版,已经实现各大版块的,样式结构,浏览器兼容已经搞定,虽然有纠结的IE6...

天外飘雪
2012/09/29
0
0
Jquery 手风琴菜单

布雷泽
2011/06/16
0
0
05-老马jQuery教程-动画

前言 jQuery的动画系统做的非常出色,而且把最常用的显示、隐藏、淡入淡出、滑动显示和折叠凳效果都做了很好的封装。跟jQuery的选择器和事件配合起来,可以实现很多很绚的效果,而且简单易用...

aicoder
2017/12/05
0
0
菜鸟问个简单的JQUERY的问题

使用JQUERY做导航菜单 鼠标滑过 显示下拉菜单 用什么方法啊 我用slideDown 显得不自然啊 不流畅

心有猛虎在细嗅蔷薇
2012/03/29
178
2
二维码弹出叠加效果

主要是利用事件,进行元素和边界判定,从而自动弹出或隐藏二维码。 HTML结构如下: CSS定义如下: 架子已搭好,可以绑定鼠标事件了:

一点灵犀
2016/07/12
176
0

没有更多内容

加载失败,请刷新页面

加载更多

WinDbg

参考来自:http://www.cnit.net.cn/?id=225 SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols ctrl + d to open dump_file Microsoft (R) Windows Debugger Version 6.12.0002.633......

xueyuse0012
今天
2
0
OSChina 周五乱弹 —— 想不想把92年的萝莉退货

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @罗马的王:分享松澤由美的单曲《地球ぎ》 很久没看圣斗士星矢了 《地球ぎ》- 松澤由美 手机党少年们想听歌,请使劲儿戳(这里) @开源中国首...

小小编辑
今天
14
2
springBoot条件配置

本篇介绍下,如何通过springboot的条件配置,控制Bean的创建 介绍下开发环境 JDK版本1.8 springboot版本是1.5.2 开发工具为 intellij idea(2018.2) 开发环境为 15款MacBook Pro 前言 很多时候,...

贺小五
今天
1
0
javascript source map 的使用

之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大...

粒子数反转
昨天
1
0
谈谈如何学Linux和它在如今社会的影响

昨天,还在农耕脑力社会,今天已经人工智能技术、大数据、信息技术的科技社会了,高速开展并迅速浸透到当今科技社会的各个方面,Linux日益成为人们信息时代的到来,更加考验我们对信息的处理程...

linux-tao
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部