HTML下拉菜单

最新推荐文章于 2025-08-14 14:16:59 发布

原创最新推荐文章于 2025-08-14 14:16:59 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

HTML5 专栏收录该内容

45 篇文章

订阅专栏

以下是一个简单的下拉菜单（Dropdown Menu）的实现示例，包括HTML、CSS和JavaScript代码。

HTML 代码

<!DOCTYPE html>
<html lang="zh-CN">
<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 id="dropdownBtn" class="dropbtn">选择一个选项</button>
        <div id="dropdownContent" class="dropdown-content">
            <a href="#" data-value="选项1">选项1</a>
            <a href="#" data-value="选项2">选项2</a>
            <a href="#" data-value="选项3">选项3</a>
        </div>
    </div>

    <p id="selectedOption">您选择的选项是：<span id="optionValue">无</span></p>

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

CSS 代码（styles.css）

body {
    font-family: Arial, sans-serif;
}

.dropdown {
    position: relative;
    display: inline-block;
}

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

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

.dropdown:hover .dropdown-content {
    display: block; /* 鼠标悬停时显示 */
}

JavaScript 代码（script.js）

// 获取下拉菜单的内容
var dropdownContent = document.getElementById("dropdownContent");

// 获取下拉菜单按钮
var dropdownBtn = document.getElementById("dropdownBtn");

// 获取显示选择结果的元素
var optionValue = document.getElementById("optionValue");

// 为下拉菜单中的每个链接添加点击事件
var links = dropdownContent.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
    links[i].onclick = function(event) {
        event.preventDefault(); // 阻止默认链接行为
        var selectedText = this.getAttribute("data-value"); // 获取选项值
        optionValue.textContent = selectedText; // 显示选择的选项
        dropdownBtn.textContent = selectedText; // 更新按钮文本
    };
}