专栏首页python成长之路JQuery实现子级选择器

JQuery实现子级选择器

效果图如下:

HTML代码如下:

<!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函数库,下载地址见另一篇博文。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JQuery实现层级菜单

    skylark
  • 前端之jquery函数库

      jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQu...

    skylark
  • 用h+c实现天天生鲜首页

    capate.jpg                                 egg,jpg                              ...

    skylark
  • 对列表hover效果的小探讨

    卡少
  • JQ实现二级导航菜单

    实用JQ实现导航二级菜单效果,导航菜单在网站中非常常见,有的网站可能会出现三级菜单及多级菜单模式,下面我们来简单的实现一个二级菜单的效果。

    申霖
  • JQuery实现层级菜单

    skylark
  • HTML5 div css3漂亮的侧边菜单栏

    Java学习123
  • 切换模块下划线跟随效果

      经常看到一些网页的导航栏点击切换时,不仅改变当前样式,同时下划线会跟随鼠标点击的标签栏缓慢滑到相应位置,那么这个简单而又好看的效果是如何实现的呢?

    流眸
  • 符合标准的有序列表分页源码示例

    一个符合标准的有序列表分页源码示例。 你可以根据你所应用的不同程序语言,打包生成一个符合标准的分页控件。 DOM结构: <ul class="paginatio...

    练小习
  • 界面组件之导航菜单备案

    <li><a href="#" rel="prev">prev</a></li>

    小蔚

扫码关注云+社区

领取腾讯云代金券