JS下拉菜单怎么做|极客笔记

JS下拉菜单怎么做

下拉菜单在Web开发中是非常常见的一种组件，通常用来展示和选择一系列选项。在JavaScript中，我们可以通过事件处理和DOM操作来实现一个简单的下拉菜单，并添加一些交互效果，使其更加用户友好。

HTML结构

首先，我们需要先定义一个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>下拉菜单</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="dropdown">
    <button class="dropbtn">下拉菜单</button>
    <div class="dropdown-content" id="myDropdown">
        <a href="#">选项1</a>
        <a href="#">选项2</a>
        <a href="#">选项3</a>
    </div>
</div>

<script src="scripts.js"></script>
</body>
</html>

CSS样式

为了让下拉菜单看起来更加美观，我们可以使用CSS样式来定义它的外观。

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

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

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 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;
}

JavaScript交互

接下来，我们使用JavaScript来实现下拉菜单的交互功能。我们要做的是当用户点击按钮时，显示下拉选项列表；再次点击按钮时，隐藏下拉选项列表。

// scripts.js
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.querySelector(".dropbtn");
    var dropdown = document.querySelector(".dropdown-content");

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

    // 点击页面其他地方，隐藏下拉选项列表
    document.addEventListener("click", function(event) {
        if (!event.target.matches('.dropbtn')) {
            dropdown.style.display = "none";
        }
    });
});

上面的JavaScript代码实现了当用户点击按钮时，切换下拉选项列表的显示状态；同时，还实现了当用户点击页面其他地方时，隐藏下拉选项列表。