使用H5写一个下拉收起的交互布局

最新推荐文章于 2025-04-15 13:32:48 发布

原创最新推荐文章于 2025-04-15 13:32:48 发布 · 452 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

在HTML5（H5）中，你可以使用原生的HTML、CSS和JavaScript来创建一个下拉收起的交互布局。以下是一个简单的示例，展示如何实现这种交互：

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="dropdown-btn">下拉
            <i class="fa fa-caret-down"></i>
        </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>

CSS (styles.css)

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

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

.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;}

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

.dropdown-btn:hover, .dropdown-btn:focus {
    background-color: #3e8e41;
}

JavaScript (可选, script.js)

如果你想要通过JavaScript来控制下拉和收起的交互，而不是使用CSS的:hover伪类，你可以这样做：

document.querySelector('.dropdown-btn').addEventListener('click', function() {
    this.nextElementSibling.style.display = this.nextElementSibling.style.display == 'none' ? 'block' : 'none';
});