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=& ...
随机推荐
- zTree返回的菜单列表中根据权限打勾
需求:管理员登录后台后可以为角色添加菜单,同时要能看到该角色已经拥有的菜单. 想法一:刚开始写的时候很迷茫,因为我们有可能会为该角色增加别的菜单,所以不能只加载该角色已经拥有的菜单,只加载该角色的菜单 ...
- Socket通信简单实例(WCF调用Socket)
服务端: 控制台程序监听 /// <summary> /// Server /// </summary> class Program { static Socket serve ...
- bootstrap table 兼容ie8 -- refreshOptions
今天项目使用 bootstrap table 在ie8下发现 方法 refreshOptions 报错. 经过调试监控发现错误如下: 153 行 代码 Object.getOwnPropertyNam ...
- jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- rtrim,dirname,魔术常量用法
$str = "Hello World!!!"; echo $str . "<br>"; echo rtrim($str,"!d" ...
- FIREDAC的心得
FIREDAC与UNIDAC有些不同 但大体上是相同的 以下是一些随手笔记: FieldCount是当前FDQuery2所在行里面有多少列 一般用FieldList[X]来代表第几列 str:=FDQ ...
- linux中标准输出相关
linux标准输出相关 http://blog.sina.com.cn/s/blog_5e99b41e0100tjtx.html
- Angular2快速入门-2.创建一个新闻列表
背景: 我们想通过一个例子,展示下Angular2 怎么绑定页面,怎么创建Component, 例子:我们创建一个新闻列表,当点击新闻列表中某一条新闻的时候,展示出该条新闻的详细信息, 在详细信息中可 ...
- 三级联动第二种方法 三级联动数据.js
var data = { '0':{2:'北京',25:'天津',24:'上海',31:'重庆',130000:'河北省',140000:'山西省',150000:'内蒙古自治区',210000:'辽 ...
- 13-js的面向对象
创建对象的几种常用的方式 1 . 使用Object或对象字面量创建对象 2 . 工厂模式创建对象 3 . 构造函数模式创建对象 4 . 原型模式创建对象 1 . 使用Object或对象字面量创建对象 ...