jQuery模拟下拉框多种方法实现

最新推荐文章于 2025-06-19 09:27:46 发布

原创最新推荐文章于 2025-06-19 09:27:46 发布 · 804 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

博客介绍了HTML代码、style样式以及使用jQuery实现的相关内容，并进行了效果展示，聚焦于前端页面的构建与交互实现。

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

html代码

<body>
    <div class="box">
        <ul>
            <li>
                <a href="http://www.baidu.com" id="a_name">地址</a>
                <ul>
                    <li><a href="#">北京</a></li>
                    <li><a href="#">南京</a></li>
                    <li><a href="#">上海</a></li>
                    <li><a href="#">杭州</a></li>
                </ul>
            </li>
            <li>
                <a href="#">收藏夹</a>
                <ul>
                    <li><a href="#">店铺</a></li>
                    <li><a href="#">宝贝</a></li>
                </ul>
            </li>
            <li>
                <a href="#">千牛卖家</a>
                <ul>
                    <li><a href="#">卖家一</a></li>
                    <li><a href="#">卖家二</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>

style样式

        * {
            margin: 0;
            padding: 0;
        }
        li {
           /*去掉原始列表的样式*/
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .box {
            width: 600px;
            height: 50px;
            background: gray;
            margin: 100px auto;
        }

        .box li {
            width: 200px;
            height: 50px;
            float: left;
            /*左右居中*/
            text-align: center;
            /*垂直居中*/
            line-height: 50px;
        }

        .box ul ul {
            display: none;
        }
    </style>

jquery实现

<script>

    $(function () {
        
        // // 方法一
        // $(".box li").mouseenter(function () {
        //     $(this).children("ul").css({ "display": "block" });
        //     // alert("as")
        // })
        // $(".box li").mouseleave(function () {
        //     $(this).children("ul").css({ "display": "none" })
        // })



        // // 方法二
        // $(".box li").mouseenter(function () {
        //     $(this).children("ul").show();
        //     // alert("as")
        // })
        // $(".box li").mouseleave(function () {
        //     $(this).children("ul").hide()
        // })


        // // // 方法三
        // $(".box li").hover(function () {
        //     $(this).children("ul").show();
        //     // alert("as")
        // }, function () {
        //     $(this).children("ul").hide();
        // })


        // // 方法四
        // $(".box li").hover(function () {
        //     $(this).children("ul").toggle();
        // })


        // 方法五
        $(".box li").hover(function () {
            $(this).children("ul").stop().slideToggle();
        })
    })
</script>

效果展示
在这里插入图片描述