Pink老师JavaScript课堂案例 - 新浪下拉菜单

最新推荐文章于 2022-12-27 15:35:57 发布

原创

最新推荐文章于 2022-12-27 15:35:57 发布 · 1.8k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端

本文通过 Pink 老师的 JavaScript 课堂案例，详细介绍了如何利用 JavaScript 和 HTML 创建新浪风格的下拉菜单。文章提供了关键代码示例，并附带了完整代码，帮助读者掌握动态菜单的实现技巧。

效果：

主要代码：

 <script>
            //获取元素
            var box = document.querySelector('.box');
            var title = box.children;

            for (var i = 0; i < title.length; i++) {
                title[i].onmouseover = function () {
                    this.children[1].style.display = 'block';
                }

                title[i].onmouseout = function () {
                    this.children[1].style.display = 'none';
                }

            }
</script>

全部代码：

<!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>D

最低0.47元/天解锁文章