通过三个代码实例，教你快速了解js（下）

置顶一般路过糸.

已于 2024-04-05 17:44:25 修改

阅读量280

点赞数 8

文章标签： javascript 开发语言 html css

于 2024-03-28 02:45:00 首次发布

本文链接：https://blog.csdn.net/Jilit_jilit/article/details/137072982

版权

接上篇

实例3、实现下拉框

index.html代码

<!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>Document</title>

    <link rel="stylesheet" href="css/index.css">

    <script src="js/index.js"></script>
</head>

<body>
    <div class="test">asdfkjlareguuicsxnbks,DFBKHBDSg</div>
    <div class="menu">
        <ul>
            <li>
                <a href="#">一级菜单1</a>
                <ul>
                    <li><a href="">二级菜单1</a></li>
                    <li><a href="">二级菜单2</a></li>
                    <li><a href="">二级菜单3</a></li>
                    <li><a href="">二级菜单4</a></li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单2</a>
            </li>
            <li>
                <a href="#">一级菜单3</a>
                <ul>
                    <li><a href="">二级菜单1</a></li>
                    <li><a href="">二级菜单2</a></li>
                    <li><a href="">二级菜单3</a></li>
                    <li><a href="">二级菜单4</a></li>
                    <li><a href="">二级菜单5</a></li>
                    <li><a href="">二级菜单6</a></li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单4</a>
                <ul>
                    <li><a href="">二级菜单1</a></li>
                    <li><a href="">二级菜单2</a></li>

                </ul>
            </li>
            <li>
                <a href="#">一级菜单5</a>
                <ul>
                    <li><a href="">二级菜单1</a></li>

                </ul>
            </li>
            <li>
                <a href="#">一级菜单6</a>
            </li>
            <li>
                <a href="#">一级菜单7</a>
                <ul>
                    <li><a href="">二级菜单1</a></li>
                    <li><a href="">二级菜单2</a></li>
                    <li><a href="">二级菜单3</a></li>
                    <li><a href="">二级菜单4</a></li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单8</a>
                <ul>
                    <li><a href="">二级菜单1</a></li>
                    <li><a href="">二级菜单2</a></li>
                    <li><a href="">二级菜单3</a></li>

                </ul>
            </li>
        </ul>
    </div>
    <div class="back">
        <img src="images/6.jpg" alt="">
    </div>

</body>

</html>

index.css代码

* {
    margin: 0;
    padding: 0;
}

.menu {
    background: rgb(111, 174, 197);
}

.menu>ul {
    display: flex;
    width: 70%;
    margin: 0 auto;
    justify-content: space-between;
}

.menu ul {
    list-style: none;
}

.menu ul li a {
    color: white;
    text-decoration: none;
    padding: 10px;
    display: block;
}

.menu>ul>li {
    position: relative;
}


/* 一、简单用css，不用js，实现下拉框      二、index.js的1~15行 效果等于 这里34~36行  
.menu>ul>li:hover ul {
    display: block;
}

.menu>ul>li>ul {
    position: absolute;
    left: 0;
    top: 41px;
    display: none;
    opacity: 0;
    transition: opacity 3s ease;
}
*/

.menu>ul>li>ul {
    position: absolute;
    left: 0;
    height: 0;
    background: rgb(111, 174, 197);
    transition: height 1.5s ease;
    overflow: hidden;
}

.back img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.test {
    height: 300px;
}

index.js

//var obj = document.querySelectorAll(".menu>ul>li")
//console.log(obj)
//console.dir(obj)
//for (i = 0; i < obj.length; i++) {
//    obj[i].onmouseenter = function() {
//        if (this.querySelector("ul")) {
//            this.querySelector("ul").style.display = "block"
//        }
//    }
//    obj[i].onmouseleave = function() {
//        if (this.querySelector("ul")) {
//            this.querySelector("ul").style.display = "none"
//        }
//    }
//}                      //效果等同index.css的34~36行

五、事件

例如：onclick点击，onmouseenter鼠标放到，onmouseleave鼠标离开等

绑定事件的第一种方式

给html元素的on前缀属性绑定事件（去index.html的.menu加onload）

绑定事件的第二种方式

给html元素对应的dom对象的on前缀属性绑定事件

window.onload = function() {}

绑定事件的第三种方式

使用addEventListener方法，其中：事件类型不带on
(true是捕获：从外到里，false是冒泡：从里到外)
语法：事件源.addEventListener("事件类型",事件函数,事件传播阶段)

//window.addEventListener("load", function() {
//
//}, true)

js代码实例：



var first_arr //声明first_arr为全局变量（使“first_arr”可以在多个方法中使用）

window.onload = function() {
    //寻找一级li元素们
    first_arr = document.querySelectorAll(".menu>ul>li")
    for (var i = 0; i < first_arr.length; i++) {
        //为一级li元素里的ul初始化位置
        if (first_arr[i].querySelector("ul")) {
            first_arr[i].querySelector("ul").style.top = first_arr[i].clientHeight
        }
        //为一级li元素绑定鼠标放上去的事件（onmouseenter）或点击事件（onclick）,寻找该一级li元素下面二级ul元素，如果有，让其显示；如果没有，就不做任何处理
        first_arr[i].onclick = function(e) {

            //阻断事件传播
            e.stopPropagation()

            if (this.querySelector("ul")) {
                //求ul元素的高度
                var ul_height = 0
                var second_arr = this.querySelectorAll(".menu>ul>li>ul>li")
                for (var j = 0; j < second_arr.length; j++) {
                    ul_height += second_arr[j].clientHeight
                }
                this.querySelector("ul").style.height = ul_height + "px"
            }
        }

        //为一级li元素绑定鼠标离开的事件（onmouseleave）,寻找该一级li元素下面二级ul元素，如果有，让其消失；如果没有，就不做任何处理
        //        first_arr[i].onmouseleave = function() {
        //            if (this.querySelector("ul")) {
        //                this.querySelector("ul").style.height = "0"
        //            }
        //    }
    }
}

监听窗口变化（窗口大小变化时，使下拉框的高度灵活变化）

window.onresize = function() {
    for (var i = 0; i < first_arr.length; i++) {
        //重新为一级li元素里的ul初始化位置
        if (first_arr[i].querySelector("ul")) {
            first_arr[i].querySelector("ul").style.top = first_arr[i].clientHeight
        }

        //重置下拉效果
        //if (first_arr[i].querySelector("ul")) {
        //    first_arr[i].querySelector("ul").style.top = "0"
        //}

        if (first_arr[i].querySelector("ul") && first_arr[i].querySelector("ul").clientHeight != 0) {

            //求当前li下ul的总高度
            var ul_height = 0
            var second_arr = first_arr[i].querySelectorAll("ul li") //不是this.querySelectorAll("ul li")
            for (var k = 0; k < second_arr.length; k++) {
                ul_height += second_arr[k].clientHeight
            }
            first_arr[i].querySelector("ul").style.height = ul_height + "px" //不是this.querySelectorAll("ul li").style.height
            console.log(second_arr)
        }

    }

}

单击任意位置，下拉框收回，(先删除上面写的事件onmouseleave)

document.onclick = function() {
    var second_arr = document.querySelectorAll(".menu>ul>li>ul")
    for (var j = 0; j < second_arr.length; j++) {
        //        if (second_arr[j].clientHeight != 0) {      
        second_arr[j].style.height = "0"
            //        }
    }
}

写到这里的时候，已经有2个点击事件onclick了，（在执行时多线程：一个事件开始后，另一个事件就立刻开始（而不是一个事件结束后，另一个事件才开始））
所以在第一个onclick开始执行，第二个onclick开始执行，（第一个没执行完height加和，第二个就把height重置为0了）
解决这个问题，需要 “阻断事件传播” （即一个事件开始后，阻断第二个事件立刻开始）