jQuery二级伸缩菜单

最新推荐文章于 2021-05-30 19:51:59 发布

vernin

最新推荐文章于 2021-05-30 19:51:59 发布

阅读量171

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_48165407/article/details/116769083

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先看看效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery二级选项卡</title>
    <!-- css代码 -->
    <style>
        *{padding: 0;margin: 0;}
        body{min-height: 100vh;background-image: url("../bg.jpg");background-size: 100% 100%;}
        li{list-style: none;}
        a{text-decoration: none;color: #fff;}
        .header{
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="header">
        <ul class="parentUl">
            <li><a href="#">主页</a></li>
            <li class="parentLi"><a href="#">动物</a>
                <ul class="child">
                    <li><a href="#">狮子</a></li>
                    <li><a href="#">老虎</a></li>
                    <li><a href="#">小狗</a></li>
                    <li><a href="#">小猫</a></li>
                </ul>
            </li>
            <li class="parentLi"><a href="#">水果</a>
                <ul class="child">
                    <li><a href="#">苹果</a></li>
                    <li><a href="#">西瓜</a></li>
                    <li><a href="#">香蕉</a></li>
                    <li><a href="#">琵琶</a></li>
                </ul>
            </li>
            <li class="parentLi"><a href="#">蔬菜</a>
                <ul class="child">
                    <li><a href="#">白菜</a></li>
                    <li><a href="#">包菜</a></li>
                    <li><a href="#">土豆</a></li>
                    <li><a href="#">茄子</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <!-- 引入jQuery文件 -->
    <script src="../jQuery.js"></script>
    <!-- jQuery代码 -->
    <script>
        // 通过jquery修改css
        $('.parentUl').css("float","right");
        $('.parentUl').children().css({"float":"left","position":"relative","padding":"10px 15px","background-color":"lightpink","font-size":"24px"});
        //鼠标进过和移出，背景颜色的变化
        $('ul').children().mouseover(function(){
            $(this).css("background-color","lightgreen");
        });
        $('ul').children().mouseleave(function(){
            $(this).css("background-color","lightpink");
        })
        // 通过jquery修改css
        $('.child').css({"position":"absolute","left":"0px","top":"51px","background-color":"lightpink","font-size":"18px","width":"100%","text-align":"center","display":"none"});

        // 滑动功能，就三行代码，
        $(".parentLi").hover(function(){
            $(this).children(".child").slideToggle(500);
        })
    // </script>
</body>
</html>

vernin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery二级伸缩菜单

先看看效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
复制链接

扫一扫