前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JQuery实现子级选择器

JQuery实现子级选择器

作者头像
汪凡
发布2019-02-22 14:43:05
7800
发布2019-02-22 14:43:05
举报
文章被收录于专栏:python成长之路

效果图如下:

HTML代码如下:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{ margin: 0; padding: 0; list-style: none;}
    .nav{
        width: 300px;
        margin: 100px auto;
    }
    .nav li{
        width: 100px;
        height: 40px;
        line-height: 40px;
        float: left;
        text-align: center;
    }
    .nav li a{
        display: block;
        height: 40px;
        text-decoration: none;
        color: #333;
        background: #ccc;
    }
    .nav li a:hover{
        background: pink;
    }
    .nav li ul{
        display: none;
    }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
    $(function(){
        $('.nav li').mouseover(function(){
            $(this).children('ul').css('display','block');
        });
        $('.nav li').mouseout(function(){
            $(this).children('ul').css('display','none');
        });
    })
    </script>
</head>
<body>
    <div class="nav">
            <ul>
                    <li>
                        <a href="###">男星</a>
                        <ul>
                            <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>
                            <li><a href="###">赵丽颖</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="###">导演</a>
                        <ul>
                            <li><a href="###">冯小刚</a></li>
                            <li><a href="###">张艺谋</a></li>
                            <li><a href="###">丁黑</a></li>
                        </ul>
                    </li>
                </ul>

    </div>
</body>
</html>

JS使用的是jQuery函数库,下载地址见另一篇博文。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-06-08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 效果图如下:
  • HTML代码如下:
  • JS使用的是jQuery函数库,下载地址见另一篇博文。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档