实现步骤：
步骤一、
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--左侧菜单收缩隐藏的更多相关文章

  1. jquery左侧菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jQuery左侧菜单实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 左侧菜单收缩的实现（包括，筛选器，addclass、removeclass、绑定事件，链式编程）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. jQuery实现菜单点击隐藏（上下左右）

    canrun <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  5. React+Ant Design设置左侧菜单导航路由的显示与隐藏（与权限无关）

    最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...

  6. jQuery弹性展开收缩菜单插件gooey.js

    分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <hea ...

  7. 亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

    关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.co ...

  8. python : jquery实现左侧菜单

    左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...

  9. jquery实现全选，取消，反选的功能&实现左侧菜单

    1.全选,取消,反选的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

随机推荐

  1. word中如何将空格变成换行

    大家在工作和学习中可能会遇到文字替换或符号替换,大家要学会txt.doc.xls之间的切换,替换好之后放到最终的文件中,txt好处是没有格式,doc个好处是有格式,而xls主要是分配到单元格中. 那么 ...

  2. WPF导学目录

    很早就知道WPF这个东西,做项目中没用到,也就没去整理学习.作为winForm的升级版,未来windows桌面应用程序的趋势,有些公司招聘需求中也会提到熟悉WPF,于是就整理学习了一下WPF. 主要参 ...

  3. numpy之统计函数和布尔数组方法

    统计函数 可以通过numpy的统计函数对整个数组或者某个轴向的数据进项统计计算. 所谓的轴向,其实就是n维向量的某一维.或者说某一行,某一列. sum对数组(向量)中全部或某个轴向的元素求和,长度为0 ...

  4. bzoj 2878 [Noi2012]迷失游乐园——树上的期望dp

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2878 很好的树上概率题的思路,就是分成up和down. 代码中有众多小细节.让我弃疗好几天的 ...

  5. 【转】Jmeter基础之——jmeter基础概念

    JMeter 介绍:一个非常优秀的开源的性能测试工具. 优点:你用着用着就会发现它的重多优点,当然不足点也会呈现出来. 从性能工具的原理划分: Jmeter工具和其他性能工具在原理上完全一致,工具包含 ...

  6. PHP下的命令行执行 php -S localhost -t public（public是根目录，也是入口文件所在目录，是LARAVEL的）

    PHP 的命令行模式     以下是 PHP 二进制文件(即 php.exe 程序)提供的命令行模式的选项参数,您随时可以通过 PHP -h 命令来查询这些参数. Usage: php [option ...

  7. PL/SQL 训练09--面向对象

    ---对象基本声明.实现.使用--对象类型,类似与JAVA中的类,通俗的讲,就是捆绑了相关函数和过程的记录类型. ---对象声明 --create type 创建一个对象类型的规范部分 create ...

  8. python学习（十） 自带电池

    10.1 模块 >>> import math >>> math.sin(0) 0.0 10.1.1 模块是程序 假设自己写的hello.py放在c:\python ...

  9. MFC调试的几个技巧

    TCHAR pStr[] = _T("this is a test!"); void* p = (void*)pStr; TRACE(_T("pStr is %s\n&q ...

  10. java常见的几种调用机制（同步调用，异步调用，回调）

    1.同步调用 同步调用是最基本的调用方式,对象b中的方法直接调用对象a的方法,这个时候程序会等待对象a的方法执行完返回结果之后才会继续往下走. 代码如下: public class A {public ...