jQuery实现下拉菜单




DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery下拉菜单title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-image: url(images/bg.jpg);
        }

        .wrap li{
            background-image: url(images/libg.jpg);
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    style>
head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1a>li>
                <li><a href="javascript:void(0);">二级菜单2a>li>
                <li><a href="javascript:void(0);">二级菜单3a>li>
            ul>
        li>
        <li>
            <a href="javascript:void(0);">一级菜单1a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1a>li>
                <li><a href="javascript:void(0);">二级菜单2a>li>
                <li><a href="javascript:void(0);">二级菜单3a>li>
            ul>
        li>
        <li>
            <a href="javascript:void(0);">一级菜单1a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1a>li>
                <li><a href="javascript:void(0);">二级菜单2a>li>
                <li><a href="javascript:void(0);">二级菜单3a>li>
            ul>
        li>
    ul>
div>
body>
    <script src="jquery-1.12.4.js">script>
    <script>
        $(function () {
            //需求: 给一级菜单li设置鼠标移入事件，二级菜单显示。
            //      给一级菜单li设置鼠标离开事件，二级菜单隐藏。

            //1.给一级菜单li设置鼠标移入事件，二级菜单显示。
            // 获取一次菜单li 的方式
            $('.wrap > ul > li').mouseover(function () {
                // $('.wrap > ul > li > ul').css('display', 'block');
                // console.log(this); // 谁触发了 鼠标移入事件, 那这个 this 还是一个 dom对象
                // 如果希望这个 dom对象, 调用 jquery方法, 那需要 $(this), 将 dom对象 -> jquery对象
                // 只获取 ul 这个元素
                // $(this).children('ul').css('display', 'block'); // 显示就是修改 display属性为block
                $(this).children('ul').show(); // show()方法本质还是更新 display属性为block
            });

            //2.给一级菜单li设置鼠标离开事件，二级菜单隐藏。
            $('.wrap > ul > li').mouseout(function () {
                $(this).children('ul').hide(); // hide()本质上, 还是更新 display属性为 none
            });

            //3.思考题:
            //为什么不给一级菜单a标签设置鼠标移入和离开事件?
            //因为这样的话,选不到二级菜单.
            // 首先找到a

            // console.log($('.wrap > ul > li > a'));
            // 鼠标移入, 显示
            // $('.wrap > ul > li > a').mouseover(function () {
            //     // console.log(this); // output: 一级菜单1 这说明 this是 dom对象
            //     // console.log($(this)); // output: jQuery.fn.init [a, context: a] 这说明 $(this) 是 jquery对象
            //     // 找 a 的 下一个兄弟 ul
            //     // console.log($(this).siblings('ul')); // output: jQuery.fn.init [ul, prevObject: jQuery.fn.init(1), context: a]
            //     $(this).siblings('ul').show();
            // });
            //
            // // 鼠标移出, 隐藏
            // $('.wrap > ul > li > a').mouseout(function () {
            //     $(this).siblings('ul').hide();
            // });


        });
    script>
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
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

在这里插入图片描述

相关阅读:
cvHoughLines2霍夫直线检测函数详解及源码解析
 Windows2019部署IIS后，浏览文件变成下载的问题解决过程
 Dubbo + Nacos 服务启动报错，返回unknown user
x86-32-Linux下栈溢出攻击原理
 笔记：.NET的框架梳理及相关概念了解（“.NET Core“ “.NET“ “.NET Framework“）
【PHP】imagettf 文字图片合成居中
 JavaScript 函数原理 +各种案例 + 使用场景
 CentOS 7 安装RabbitMQ
统计十进制数对应二进制数中1的个数
 Windows与网络基础-4-安装GNS3软件环境
原文地址：https://blog.csdn.net/beyondx/article/details/126097126