JS下拉菜单|极客笔记

JS下拉菜单

下拉菜单是网页开发中常见的交互组件之一，可以让用户通过点击或悬停的方式选择或展示更多选项。在前端开发中，使用JavaScript可以很方便地实现下拉菜单的功能并加入一些动画效果。本文将详细介绍如何使用JavaScript创建一个简单的下拉菜单，并通过示例代码演示效果。

HTML结构

首先，我们需要在HTML文件中创建下拉菜单的基本结构。一般来说，下拉菜单包括一个触发下拉效果的按钮和一个下拉菜单容器，当用户点击按钮时，下拉菜单会展开或收起。以下是一个基本的HTML结构示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="dropdown">
        <button class="dropbtn">点击我</button>
        <div class="dropdown-content">
            <a href="#">选项1</a>
            <a href="#">选项2</a>
            <a href="#">选项3</a>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

在上面的代码中，我们创建了一个按钮元素和一个下拉菜单容器，按钮的类名为dropbtn，下拉菜单容器的类名为dropdown-content。当用户点击按钮时，下拉菜单会展开，显示三个选项。

CSS样式

为了让下拉菜单看起来更美观，我们可以使用CSS来添加样式。以下是一个简单的CSS样式示例：

/* styles.css */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    background-color: #f1f1f1;
    color: black;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #ccc;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

在上面的CSS样式中，我们定义了下拉菜单容器和按钮的样式，包括背景颜色、字体大小、边框等，以及鼠标悬停时的效果。

JavaScript交互

接下来，我们使用JavaScript来添加下拉菜单的交互效果。当用户点击按钮时，下拉菜单容器会显示或隐藏。以下是完整的script.js代码：

// script.js
document.addEventListener("DOMContentLoaded", function() {
    var dropdown = document.querySelector(".dropdown");
    var dropdownContent = document.querySelector(".dropdown-content");

    dropdown.addEventListener("click", function() {
        if (dropdownContent.style.display === "block") {
            dropdownContent.style.display = "none";
        } else {
            dropdownContent.style.display = "block";
        }
    });

    document.addEventListener("click", function(event) {
        if (!dropdown.contains(event.target)) {
            dropdownContent.style.display = "none";
        }
    });
});

在上面的JavaScript代码中，我们首先通过querySelector方法获取按钮和下拉菜单容器的DOM元素，并通过addEventListener监听按钮的点击事件。当用户点击按钮时，切换下拉菜单容器的display属性值，实现展开和收起的效果。另外，我们还监听了整个文档的点击事件，当用户点击文档其他位置时，隐藏下拉菜单。