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

当然，我可以提供一个简单的HTML5和CSS示例来创建一个下拉收起的交互布局。此外，我还会添加一些简单的JavaScript来处理点击事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉收起交互布局</title>
    <style>
        .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;
            background-color: #f9f9f9;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown-toggle {
            cursor: pointer;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            transition-duration: 0.4s;
            border-radius: 4px;
        }

        .dropdown-toggle:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="dropdown">
        <button class="dropdown-toggle" onclick="toggleDropdown()">下拉/收起</button>
        <div id="myDropdown" class="dropdown-content">
            <p>选项1</p>
            <p>选项2</p>
            <p>选项3</p>
        </div>
    </div>

    <script>
        function toggleDropdown() {
            var dropdownContent = document.getElementById("myDropdown");
            if (dropdownContent.style.display === "none") {
                dropdownContent.style.display = "block";
            } else {
                dropdownContent.style.display = "none";
            }
        }
    </script>
</body>
</html>

在这个示例中，我创建了一个带有下拉和收起功能的交互布局。.dropdown 类用于包装整个下拉组件，.dropdown-content 类用于包装下拉内容，而 .dropdown-toggle 类用于样式化下拉/收起按钮。

JavaScript 函数 toggleDropdown() 用于处理点击事件，它会切换下拉内容的显示状态。当用户点击按钮时，如果下拉内容当前是隐藏的，则将其显示；如果下拉内容当前是显示的，则将其隐藏。

请注意，这个示例使用了简单的CSS样式和JavaScript代码，你可以根据自己的需求进行自定义和扩展。

posted @ 2024-12-28 09:04  王铁柱6  阅读(34)  评论(0)    收藏  举报