jQuery导航下拉菜单

最新推荐文章于 2025-07-17 11:40:20 发布

原创最新推荐文章于 2025-07-17 11:40:20 发布 · 568 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jQuery 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery来创建一个响应式的下拉菜单。通过应用jQuery的hover事件和slideToggle方法，实现了当鼠标悬停在一级菜单上时，相应的二级菜单项滑动显示和隐藏，为网页导航提供了一个交互友好的体验。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <style>
        *{margin: 0 auto; padding: 0;}
        .nav{
            width: 340px;
            height: 30px;
            background:#6090DA;
        }
        ul{list-style-type: none;}
        .nav li{
            float: left;
            height: 30px;
            width: 90px;
            background: #0e90d2;
            margin-left: 15px;
            line-height: 30px;
            text-align: center;
        }
        .nav ul li ul{
            display: none;
        }
    </style>
    <script type="text/javascript" src='jquery-1.11.3.min.js'></script>
    <script>

        $(function(){
             //麻烦的方法
            /* $('.nav ul>li').hover(
             function(){

             $(this).children().slideDown();
             // 鼠标经过这个li   这个li 里面孩子 ul  会显示出来

             },function(){
             $(this).children().slideUp();
             })*/

            //简洁的写法  >的意识是ul的下一代li
            $('.nav ul>li').hover(function () {
                $(this).children().slideToggle();//切换显示和隐藏
            })

        })
    </script>

</head>
<body>
<div class="nav">
    <ul class="first">
        <li>一级菜单
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>