用jQuery写特殊显示和下拉菜单

最新推荐文章于 2022-05-09 07:15:00 发布

原创最新推荐文章于 2022-05-09 07:15:00 发布 · 213 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的下拉菜单交互效果，通过hover和slideToggle方法，实现了鼠标悬停时显示下拉菜单，并在移开时隐藏菜单的动画效果。同时，展示了如何通过点击事件更改超链接的href属性。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <style>
        a{
            text-decoration: none;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        li{
            width: 200px;
            text-align: center;
            display: inline-block;
            line-height: 50px;
        }
        .father_ul li{
            float: left;
        }
        .my_info_area{
            width: 650px;
            height: 300px;
            background: #999;
            margin: 200px auto;
            overflow: hidden;
        }
    </style>
    <script src="../20190522/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $('.father_ul li ul').hide();

            /*
            * 鼠标移上去则展示子集中除了a标签之外的内容,移开则隐藏
            * 有五种方法1.mouseover,2.hover
            * */
//            $('.father_ul li').hover(function () {
////                $('.father_ul li ul').show();
//               siblings()就是排他方法
//                $(this).children("a").siblings().show();
//            },function () {
//                $(this).children("a").siblings().hide();
//            });

            //方法3 toggle
//            $('.father_ul li').hover(function () {
//                $(this).children('ul').toggle();
//            });

            //方法4 动画排队，之前要删除
            $('.father_ul li').hover(function () {
                $(this).children('ul').stop().slideToggle();
            });
            $('#a_href').click(function () {
                // 点击获取地址，或者更改地址
            console.log($('#a_name').attr('href'));
            $('#a_name').attr({href:'baidu.com'});

                // 点击之后，就爱那个地址更改成买家地址
                $('#a_name').html('买家地址');
                // 这三个都可以获取并设置
                // text是文本，html文本加标签
                // val是获取且设置表单字段的值
                console.log($('#a_name').text());
                console.log($('#a_name').html());
                console.log($('#a_name').val());

            })

        })
    </script>
</head>
<body>
<div id="a_href">点击</div>
<div class="my_info_area">

    <ul class="father_ul">
        <li>
            <a id="a_name" href="baidu.com" class="a_bq">地址</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="#" class="a_bq">收藏夹</a>
            <ul>
                <li><a href="#">店铺</a></li>
                <li><a href="#">宝贝</a></li>
            </ul>
        </li>
        <li><a href="#" class="a_bq">千牛卖家</a>
            <ul>
                <li><a href="#">LV</a></li>
                <li><a href="#">GUCCI</a></li>
            </ul>
        </li>
    </ul>
</div>

</body>
</html>