首页 > 编程语言 > JQuery实现折叠式菜单的详细代码
2020
10-04

JQuery实现折叠式菜单的详细代码

两种风格：

1：点菜单项，每个子菜单项都可显示

在这里插入图片描述

?
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>30秦甜甜_实训13-2_2_180701802230_18计算机2班</title>
    </head>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
 
        .menu-list {
            width: 300px;
            margin: 60px auto;
            border: 2px solid #bbffff;
        }
 
        .menu-head {
            background-color: #aaaaff;
            text-align: center;
            height: 100px;
            line-height: 100px;
        }
 
        .menu-body>li {
            height: 60px;
            line-height: 60px;
            text-align: center;
        }
    </style>
    <script src="../JQuery/jquery.js"></script>
    <script>
        $(function() {
            $(".menu-body").hide().eq(0).show();
            $(".menu-head").click(function() {
                // 1:
                $(this).next().toggle();
                // 2:
                // $(this).next().show();
            });
        });
    </script>
    <body>
        <div class="menu-list">
            <ul>
                <li>
                    <h2 class="menu-head">学科</h2>
                    <ul class="menu-body">
                        <li>语文</li>
                        <li>数学</li>
                        <li>英语</li>
                        <li>体育</li>
                    </ul>
                </li>
                <li>
                    <h2 class="menu-head">水果</h2>
                    <ul class="menu-body">
                        <li>苹果</li>
                        <li>香蕉</li>
                        <li>草莓</li>
                        <li>西瓜</li>
                    </ul>
                </li>
                <li>
                    <h2 class="menu-head">蔬菜</h2>
                    <ul class="menu-body">
                        <li>番茄</li>
                        <li>黄瓜</li>
                        <li>生菜</li>
                        <li>茄子</li>
                    </ul>
                </li>
                <li>
                    <h2 class="menu-head">肉类</h2>
                    <ul class="menu-body">
                        <li>鱼肉</li>
                        <li>鸡肉</li>
                        <li>牛肉</li>
                        <li>猪肉</li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>

运行结果图：

在这里插入图片描述

2：点菜单项，仅当前子菜单项可显示，其余子菜单隐藏

在这里插入图片描述

?
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>30秦甜甜_实训13-2_3_180701802230_18计算机2班</title>
    </head>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
 
        .menu-list {
            width: 300px;
            margin: 60px auto;
            border: 2px solid #bbffff;
        }
 
        .menu-head {
            background-color: #aaaaff;
            text-align: center;
            height: 100px;
            line-height: 100px;
        }
 
        .menu-body>li {
            height: 60px;
            line-height: 60px;
            text-align: center;
        }
    </style>
    <script src="../JQuery/jquery.js"></script>
    <script>
        $(function() {
            $(".menu-body").hide().eq(0).show();
            $(".menu-head").click(function() {
                // 1：
                // $(this).next().toggle();
                // 2:
                $(this).next().show();
                var parentli = $(this).parent();
                var lis=parentli.siblings();
                lis.children(".menu-body").hide();
            });
        });
    </script>
    <body>
        <div class="menu-list">
            <ul>
                <li>
                    <h2 class="menu-head">学科</h2>
                    <ul class="menu-body">
                        <li>语文</li>
                        <li>数学</li>
                        <li>英语</li>
                        <li>体育</li>
                    </ul>
                </li>
                <li>
                    <h2 class="menu-head">水果</h2>
                    <ul class="menu-body">
                        <li>苹果</li>
                        <li>香蕉</li>
                        <li>草莓</li>
                        <li>西瓜</li>
                    </ul>
                </li>
                <li>
                    <h2 class="menu-head">蔬菜</h2>
                    <ul class="menu-body">
                        <li>番茄</li>
                        <li>黄瓜</li>
                        <li>生菜</li>
                        <li>茄子</li>
                    </ul>
                </li>
                <li>
                    <h2 class="menu-head">肉类</h2>
                    <ul class="menu-body">
                        <li>鱼肉</li>
                        <li>鸡肉</li>
                        <li>牛肉</li>
                        <li>猪肉</li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

运行结果图：

在这里插入图片描述

总结

到此这篇关于JQuery实现折叠式菜单的详细代码的文章就介绍到这了,更多相关jquery 折叠式菜单内容请搜索自学编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持自学编程网！

编程技巧