JQuery实现子级选择器

简介: 效果图如下:HTML代码如下: Document *{ margin: 0; padding: 0; list-style: none;} .

效果图如下:

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

 

                                                                   -------  知识无价,汗水有情,如需搬运请注明出处,谢谢!

目录
相关文章
N..
|
3天前
|
JavaScript 前端开发 开发者
jQuery选择器
jQuery选择器
N..
16 1
|
3天前
|
JavaScript
jquery的9大选择器
jquery的9大选择器
29 2
|
3天前
|
JavaScript
jQuery :nth-of-type(n)选择器的用法详解
jQuery中,:nth-of-type(n)选择器可以对selector选择器匹配选择到的所有HTML元素进行二次匹配选择,为了更好地阐述:nth-of-type(n)的语法,这里假设selector是一个元素p选择器,如此,:nth-of-type(n)可以用于匹配p元素选择器选择到的p元素指向的父元素中第n个类型为p的子元素,而且与p是否是该父元素的第n个子元素无关,比如
41 5
|
21小时前
|
JavaScript 前端开发 搜索推荐
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
|
3天前
|
JavaScript 前端开发 开发者
jquery选择器有哪些
jquery选择器有哪些
|
3天前
|
JavaScript 前端开发
【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
【5月更文挑战第1天】【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
|
3天前
|
JavaScript 索引
jQuery 选择器有几种,分别是什么
jQuery 选择器有几种,分别是什么
26 5
|
3天前
|
Web App开发 JavaScript 前端开发
JQuery的选择器有哪些?
JQuery的选择器有哪些?
12 1
|
3天前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
11 0
|
3天前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
9 1