jQuery--左侧菜单收缩隐藏
实现步骤：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } </style></head><body> <div> <div> <div id="m1" onclick="Change(1);">菜单一</div> <div> <div>1.1</div> <div>1.2</div> <div>1.3</div> </div> </div> <div> <div id="m2" onclick="Change(2);">菜单二</div> <div> <div>2.1</div> <div>2.2</div> <div>2.3</div> </div> </div> <div> <div id="m3" onclick="Change(3);">菜单三</div> <div> <div>3.1</div> <div>3.2</div> <div>3.3</div> </div> </div> </div> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <script type="text/javascript"> function Change(arg){ //找到，点击的哪一个？ if(arg==1){ var menu=$('#m1') }else if(arg==2){ var menu=$('#m2') }else{ var menu=$('#m3') } console.log(menu.text()) } </script></body></html> |
步骤二、
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } </style></head><body> <div> <div> <div onclick="Change(this);">菜单一</div> <div class="content"> <div>1.1</div> <div>1.2</div> <div>1.3</div> </div> </div> <div> <div onclick="Change(this);">菜单二</div> <div class="content hide"> <div>2.1</div> <div>2.2</div> <div>2.3</div> </div> </div> <div> <div onclick="Change(this);">菜单三</div> <div class="content hide"> <div>3.1</div> <div>3.2</div> <div>3.3</div> </div> </div> </div> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <script type="text/javascript"> function Change(arg){ //找到，点击的哪一个？ //var t= $(arg).text(); //console.log(t); //$(arg)表示当前点击的标签 //一、找到下一个标签，移除hide //$(arg).next()下一个标签 //removeClaass('') $(arg).next().removeClass('hide'); //二、找到其他菜单，内容隐藏，添加hide //当前标签的父标签 $(arg).parent() //所有父标签的兄弟标签 $(arg).parent().siblings() //所有兄弟标签下的content样式的标签，添加hide样式 $(arg).parent().siblings().find('.content').addClass('hide'); } </script></body></html> |
效果：
jQuery--左侧菜单收缩隐藏的更多相关文章
- jquery左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery左侧菜单实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 左侧菜单收缩的实现（包括，筛选器，addclass、removeclass、绑定事件，链式编程）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery实现菜单点击隐藏（上下左右）
canrun <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- React+Ant Design设置左侧菜单导航路由的显示与隐藏（与权限无关）
最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...
- jQuery弹性展开收缩菜单插件gooey.js
分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <hea ...
- 亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读
关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.co ...
- python : jquery实现左侧菜单
左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...
- jquery实现全选，取消，反选的功能&实现左侧菜单
1.全选,取消,反选的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
随机推荐
- 安装PL/SQL客户端来访问操作步骤
1 2 3.改变路径 4 5 6 7 8 9.选择注册机 10
- 3 循环语句——《Swift3.0从入门到出家》
3 循环语句 当一段代码被多次重复利用的使用我们就使用循环 swift提供了三种形式的循环语句 1.while 循环 2.repeat — while 循环 3.for — in 循环 while 循 ...
- 使用axis2进行webservice发布与调用
一.介绍下cxf.axis.axis2区别 新一代的Web Services 框架如Axis2.CXF 都是由现有的项目中逐渐演化而来的,Axis2 是由大家熟悉的Axis 1.x 系列演化过来,而A ...
- (转)android项目用到的公共类方法
/*** 直接下载图片并加载至控件(非异步加载)* * @param activity* @param urlpath* 图片下载路径* @param imageView* ...
- <trim>: prefix+prefixOverrides+suffix+suffixOverrides
<trim prefix="where" prefixOverrides="where" suffixOverrides="and"& ...
- 日志jar包冲突报错：Class path contains multiple SLF4J bindings
问题现象:tomcat启动卡死,报错日志如下: 十一月 07, 2017 8:35:45 下午 org.apache.catalina.core.ApplicationContext log 信息: ...
- pmap命令 查看进程用了多少内存
pmap命令 查看进程用了多少内存 用法 pmap [ -x | -d ] [ -q ] pids ...
- linux字符界面下root用户无法登录成功
os: rhel5.6_x86_64 ———————————————————————————————————————————— 故障:图形界面登录正常,其他一切正常,但是切换到字符界面时,输入用户ro ...
- module_param 用于动态开启/关闭 驱动打印信息
1.定义模块参数的方法: module_param(name, type, perm); 其中,name:表示参数的名字; type:表示参数的类型; perm:表示参数的访问权限 ...
- C#获取视频文件播放长度
下面两种方法只支持部分视频格式,一般格式mp3,wma等等支持 1.使用Shell32 添加引用,选择COM中的Microsoft Shell Controls And Automation引用 // ...