jQuery菜单折叠（鼠标移入）

最新推荐文章于 2022-08-09 20:10:44 发布

原创最新推荐文章于 2022-08-09 20:10:44 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js #jquery #html

jQuery demo 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的鼠标悬停菜单折叠效果。通过mouseenter和mouseleave事件结合slideUp和slideDown方法，实现了菜单项的折叠与展开。适用于网页导航栏等交互设计。

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

鼠标移入出发菜单折叠展开

（jQuery slidedown和slideup实现）
**

  <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            margin-top: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .menu {
            width: 500px;
            height: 50px;
            line-height: 50px;
            align-items: center;
            font-size: 25px;
            background-color: aqua;
            /* position: relative;  */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        ul {
            list-style: none;
            /* display: none; */
        }
        
        ul li {
            background-color: #E771EF;
            width: 500px;
            height: 25px;
            border: 2px solid rosybrown;
            box-sizing: border-box;
        }
        
        .menu p>span {
            cursor: pointer;
            width: 50px;
            height: 50px;
            /* border: 1px solid red; */
            padding: 5px;
            padding-left: 10px;
            padding-right: 10px;
        }
        
        .banner1,
        .banner2,
        .banner3 {
            border: 2px solid green;
            box-sizing: border-box;
        }
        /* .menu p {} */
    </style>
</head>

<body>
    <div class="box">
        <div class="banner1">

            <div id="menu1" class="menu">
                <p> 点击打开1&nbsp;&nbsp;&nbsp; <span>☟</span> </p>
            </div>
            <ul>
                <li>菜单1</li>
                <li>菜单2</li>
                <li>菜单3</li>
                <li>菜单4</li>
                <li>菜单5</li>
            </ul>
        </div>
        <div class="banner2">

            <div id="menu2" class="menu">
                <p> 点击打开2&nbsp;&nbsp;&nbsp;<span>☟</span></p>
            </div>
            <ul>
                <li>菜单1</li>
                <li>菜单2</li>
                <li>菜单3</li>
                <li>菜单4</li>
                <li>菜单5</li>
            </ul>
        </div>
        <div class="banner3">
            <div id="menu3" class="menu">
                <p> 点击打开3&nbsp;&nbsp;&nbsp;<span>☟</span></p>
            </div>
            <ul>
                <li>菜单1</li>
                <li>菜单2</li>
                <li>菜单3</li>
                <li>菜单4</li>
                <li>菜单5</li>
            </ul>
        </div>
    </div>
</body>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
    //要用移入实现就需要用mouseleave和mouseenter实现，这样防止冒泡只在指定元素上触发
    console.log($("#menu1 p>span"));
    $(function() {

        var $new1 = $('<span>☝</span>')
        var $new2 = $('<span>☟</span>')
        $('ul').stop(true).slideUp();
        $("#menu1 p>span").mouseenter(function() {

            $("#menu1 p>span").text('☟')
                // $("#menu1 p>span").replaceWith($new2)
            $('.banner1 ul').stop(true).slideDown();
            console.log(2);
        })
        console.log($(".banner1 ul"));
        $(".banner1 ul").mouseleave(
            function() {
                $("#menu1 p>span").text('☝')
                    // $("#menu1 p>span").replaceWith($new1)
                $('.banner1 ul').stop(true).slideUp();
                console.log(1);

            })
        $("#menu2 p>span").mouseenter(function() {

                $("#menu2 p>span").text('☟')
                    // $("#menu1 p>span").replaceWith($new2)
                $('.banner2 ul').stop(true).slideDown();
                console.log(2);
            })
            // console.log($(".banner1 ul"));
        $(".banner2 ul").mouseleave(
            function() {
                $("#menu2 p>span").text('☝')
                    // $("#menu1 p>span").replaceWith($new1)
                $('.banner2 ul').stop(true).slideUp();
                console.log(1);

            })
        $("#menu3 p>span").mouseenter(function() {

            $("#menu3 p>span").text('☟')
                // $("#menu1 p>span").replaceWith($new2)
            $('.banner3 ul').stop(true).slideDown();
            console.log(2);
        })
        console.log($(".banner3 ul"));
        $(".banner3 ul").mouseleave(
            function() {
                $("#menu3 p>span").text('☝')
                    // $("#menu1 p>span").replaceWith($new1)
                $('.banner3 ul').stop(true).slideUp();
                console.log(1);

            })

    })
</script>