分别用html/css、javascript、jQuery实现下拉菜单的显示和隐藏

最新推荐文章于 2023-07-21 17:49:01 发布

小小小菜鸟1997

最新推荐文章于 2023-07-21 17:49:01 发布

阅读量4.5k

点赞数 5

文章标签：前端 html/css javascript jQuery 下拉列表

本文链接：https://blog.csdn.net/HuLuWa1997/article/details/103179858

版权

一、html/css实现下拉菜单的显示和隐藏
简单来说就是通过对css样式的控制来实现下拉菜单的显示和隐藏
具体代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>drop-down list</title>
    <style type="text/css">
    *{
        margin:0px;
        padding:0px;
    }
    .nav{
        width:600px;
        height:40px;
        margin:0 auto;
        background-color:#eee;
    }
    ul{
        list-style:none;
    }
    ul li{
        float:left;
        line-height:40px;
        text-align:center;
        position:relative;/*给一级菜单一个相对定位*/
    }
    a{
        text-decoration:none;
        color:#000;
        display:block;
        padding:0 10px;
    }
    a:hover{
        color:#fff;
        background-color:#666
   }
   ul li ul{
       position:absolute;/*给二级菜单一个绝对定位，防止一级菜单被二级菜单给撑开*/
       left:0px;
       top:40px;
       display:none;   /*先让二级菜单消失*/
 }
   ul li ul li{
       float:none;/*因为二级菜单默认继承一级菜单的样式，所以我们需要取消浮动*/
       background-color:#eee;
       margin-top:2px;

   }
   /*单独设置二级菜单的样式*/
   ul li ul li a:hover{
       background-color:aqua;
   }
   /*当鼠标经过一级菜单的时候二级菜单显示*/
   ul li:hover ul{
       display:block;
         }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li ><a href="#">课程大厅</a>
            <ul>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
            </ul>
        </li>
            <li><a href="#">学习中心</a>
                <ul>
                    <li><a href="#">视频学习</a></li>
                    <li><a href="#">案例学习</a></li>
                    <li><a href="#">交流平台</a></li>
                </ul>
            </li>
            <li><a href="#">经典案例</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </div>
</body>
</html>

运行效果如下：
在这里插入图片描述
如果有兴趣了解一下怎样简单快捷的制作如上图的动态图片演示效果可以私信我呦！
好了言归正传，下面我来演示通过另外两种方式实现下拉菜单的显示和隐藏效果。
二、通过javascript实现下拉菜单的显示和隐藏
主要掌握三个知识点分别是
onmouseover(鼠标经过)事件
onmouseout(鼠标离开)事件
function（）方法
具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>drop-down list</title>
    <style type="text/css">
    *{
        margin:0px;
        padding:0px;
    }
    .nav{
        width:600px;
        height:40px;
        margin:0 auto;
        background-color:#eee;
    }
    ul{
        list-style:none;
    }
    ul li{
        float:left;
        line-height:40px;
        text-align:center;
        position:relative;/*给一级菜单一个相对定位*/
    }
    a{
        text-decoration:none;
        color:#000;
        display:block;
        padding:0 10px;
    }
    a:hover{
        color:#fff;
        background-color:#666
   }
   ul li ul{
       position:absolute;/*给二级菜单一个绝对定位，防止一级菜单被二级菜单给撑开*/
       left:0px;
       top:40px;
       display:none;   /*先让二级菜单消失*/
 }
   ul li ul li{
       float:none;/*因为二级菜单默认继承一级菜单的样式，所以我们需要取消浮动*/
       background-color:#eee;
       margin-top:2px;

   }
   /*单独设置二级菜单的样式*/
   ul li ul li a:hover{
       background-color:#802ae9;
   }
    </style>
    <script type="text/javascript">
     function ShowMenu(li){
        var submenu=li.getElementsByTagName("ul")[0];
        submenu.style.display="block"; /*使用js代码来控制二级菜单的显示和隐藏*/
          }
    function HideMenu(li){
        var submenu=li.getElementsByTagName("ul")[0];
        submenu.style.display="none";
    }      
    </script>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li onmouseover="ShowMenu(this)" onmouseout="HideMenu(this)"><a href="#">课程大厅</a>
            <ul>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
            </ul>
        </li>
            <li onmouseover="ShowMenu(this)" onmouseout="HideMenu(this)"><a href="#">学习中心</a>
                <ul>
                    <li><a href="#">视频学习</a></li>
                    <li><a href="#">案例学习</a></li>
                    <li><a href="#">交流平台</a></li>
                </ul>
            </li>
            <li><a href="#">经典案例</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </div>
</body>
</html>

运行效果如下：
在这里插入图片描述
三、用jQuery来实现下拉菜单的显示和隐藏
function()方法
children()方法寻找子元素
show()方法显示html文件
hide()方法隐藏html文件
具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>menu</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        .nav{
            width:600px;
            height:40px;
            margin:0 auto;
            background-color:#eee;
        }
        ul{
            list-style:none;
        }
        ul li{
            float:left;
            line-height:40px;
            text-align:center;
            position:relative;/*给一级菜单一个相对定位*/
        }
        a{
            text-decoration:none;
            color:#000;
            display:block;
            padding:0 10px;
        }
        a:hover{
            color:#fff;
            background-color:#666
       }
       ul li ul{
           position:absolute;/*给二级菜单一个绝对定位，防止一级菜单被二级菜单给撑开*/
           left:0px;
           top:40px;
           display:none;/*先让二级菜单消失*/
     }
       ul li ul li{
           float:none;
           background-color:#eee;
           margin-top:2px;
    
       }
       /*单独设置二级菜单的样式*/
       ul li ul li a:hover{
           background-color:#80ff00;
       }
        </style>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
        <script type="text/javascript">
          $(function(){
            $(".navmenu").mouseover(function()
            {
                $(this).children("ul").show();
            })
            $(".navmenu").mouseout(function()
            {
                $(this).children("ul").hide();
            })
 })
</script>
    </head>
    <body>
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li class="navmenu"><a href="#">课程大厅</a>
                <ul>
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">jQuery</a></li>
                </ul>
            </li>
                <li class="navmenu"><a href="#">学习中心</a>
                    <ul>
                        <li><a href="#">视频学习</a></li>
                        <li><a href="#">案例学习</a></li>
                        <li><a href="#">交流平台</a></li>
                    </ul>
                </li>
                <li><a href="#">经典案例</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>
        </div>
</body>
</html>

注意：这里使用的是百度的jQuery库
运行效果如下：
在这里插入图片描述
在实际的开发中，jQuery的操作更具有逻辑性，也能实现更复杂的功能，这恰恰应证了jQuery的口号
“Write Less Do More”。
各位大神若有好的经验，欢迎交流学习！
我是一个热爱前端的前端攻城狮！