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=& ...
随机推荐
- 无线网破解 跑字典 EWSA使用教程
当我们用奶瓶抓到包,就可以再windowsxp&7&8下跑字典 工具/原料 EWSA4.0完美汉化破解版 字典 方法/步骤 1.打开程序 2.导入握手包 3.配置EWSA ,1.选项 ...
- SQL面试题-行列互换-if、【case when】
http://www.cda.cn/view/21469.html tb_lemon_grade中,表中字段id,student_name,course,score分别表示成绩id,学生姓名,课程名称 ...
- WCF 配置文件
<?xml version="1.0" encoding="utf-8" ?> <configuration> <system.S ...
- 【java规则引擎】基本语法和相关属性介绍
一个规则的语法信息 [1]条件部分(LSH部分)===>规则pattern之间的连接条件符号: (1)LHS 部分是由一个或多个条件组成,条件又称之为 pattern(匹配模式),多个 pa ...
- __init__.py文件的作用
原来在python模块的每一个包中,都有一个__init__.py文件(这个文件定义了包的属性和方法)然后是一些模块文件和子目录,假如子目录中也有 __init__.py 那么它就是这个包的子包了.当 ...
- FastAdmin 2018-05-26 更新时更新了 SQL 文件 关于 ROW_FORMAT=DYNAMIC 改为 ROW_FORMAT=COMPACT 问题
FastAdmin 2018-05-26 更新时更新了 SQL 文件 关于 ROW_FORMAT=DYNAMIC 改为 ROW_FORMAT=COMPACT 问题 观查到 FastAdmin 在 20 ...
- Java 程序员容易犯的10个SQL错误
Java程序员编程时需要混合面向对象思维和一般命令式编程的方法,能否完美的将两者结合起来完全得依靠编程人员的水准: 技能(任何人都能容易学会命令式编程) 模式(有些人用“模式-模式”,举个例子,模式可 ...
- 安装并配置工具以使用iOS进行构建
Visual Studio 2015 Visual Studio文档的新家是docs.microsoft.com上的Visual Studio 2017文档 . 有关Visual Studio 2 ...
- 【转】Jmeter做功能测试的优点和不足
利用Jmeter做功能测试有以下优点: ● 不依赖于界面,如果服务正常启动,传递参数明确就可以添加测试用例,执行测试 ● 测试脚本不需要编程,熟悉http请求,熟悉业务流程,就可以根据页面 ...
- MFC学习(五)常见面试题
1:应用程序类 CTestOneApp::InitInstance 可以看做是MFC程序的入口函数,main函数隐藏在这个函数中.实际开发中一般不需要对这个类进行操作,但如果要在建立主对话框之前处理一 ...