02jquery01-用3种方式实现下拉菜单_jquery下拉菜单滚动-优快云博客

本文链接：https://blog.youkuaiyun.com/stopcpp/article/details/53021485

本文详细介绍了使用jQuery创建下拉菜单的三种不同技术，包括基础的CSS+jQuery结合，利用事件委托以及通过toggle方法实现。这些方法将帮助开发者更灵活地在网页中构建交互式的导航菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 330px;
            height: 30px;
            margin: 100px auto;
            background-color: #38bdfd;

        }
        .wrap ul{
            list-style-type: none;
        }
        .wrap ul li{
            float: left;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            margin-right: 10px;
            position: relative;
        }
        .wrap a{
            color: #000;
            text-decoration: none;
            display: block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #48C0FD;

        }
        .wrap ul li ul{
            position: absolute;
            display: none;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function () {
//            $(".wrap li").mouseenter(function () {
//                $(this).children("ul").show();
//            });
//            $(".wrap li").mouseleave(function () {
//                $(this).children("ul").hide();
//            });

//            $(".wrap li").hover(function () {
//                $(this).children("ul").show();
//            }, function () {
//                $(this).children("ul").hide();
//            });

//            $(".wrap li").hover(function () {
//                var $this = $(this).children("ul");
//                var isShow  = $this.css("display");
//                if(isShow === "block"){
//                    $this.hide();
//                }else{
//                    $this.show();
//                }
//            });
            $(".wrap li").hover(function () {
               $(this).children("ul").slideToggle();
            });

        });
    </script>
</head>
<body>
    <div class="wrap">
        <ul>
            <li>
                <a href="#">一级菜单1</a>
                <ul>
                    <li><a href="#">二级菜单1</a></li>
                    <li><a href="#">二级菜单2</a></li>
                    <li><a href="#">二级菜单3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单2</a>
                <ul>
                    <li><a href="#">二级菜单1</a></li>
                    <li><a href="#">二级菜单2</a></li>
                    <li><a href="#">二级菜单3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单3</a>
                <ul>
                    <li><a href="#">二级菜单1</a></li>
                    <li><a href="#">二级菜单2</a></li>
                    <li><a href="#">二级菜单3</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>