children 的使用以及下拉框的写法

最新推荐文章于 2024-04-13 21:40:18 发布

原创最新推荐文章于 2024-04-13 21:40:18 发布 · 485 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

小白日志专栏收录该内容

4 篇文章

订阅专栏

本文详细探讨了HTML中`<select>`元素及其`children`属性的使用，阐述如何创建和操作下拉框。通过实例，展示了如何动态生成下拉选项，并讲解了在前端开发中有效管理`children`的方法，为构建交互式表单提供指导。

<!DOCTYPE html>
<html lang="en">
<!--再次表白林祤环-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        a {
            text-decoration: none;
            font-size: 14px;
        }

        .nav {
            margin: 100px;
        }

        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }

        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }

        .nav>li>a:hover {
            background-color: #eee;
        }

        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }

        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }

        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <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>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        var li = document.querySelectorAll(".nav>li");
        // 首先找到 .nav下的 子li 并获取元素
        for (var i = 0; i < li.length; i++) {
            // 先遍历 为了给每个li 添加 鼠标移入 移出事件
            li[i].onmouseover = function () {
                // 添加鼠标移入事件
                this.children[1].style.display = "block";
                // this指向的是 谁调用这个函数 它指向谁 li[i]
                /* children  是 指的是调用这个函数的 标签底下的子元素 
                标签可以看成一个数组  里面所有的子元素都是它的 数组元素
                children指的是父标签底下的子元素
                children[里面是它的索引值] */
            }

            li[i].onmouseout = function () {
                //再给每个li添加一个鼠标移出事件 
                // 可以在鼠标移出的时候 使下拉框隐藏起来
                this.children[1].style.display = "none";

            }

        }
    </script>
</body>

</html>