纯CSS折叠面板

玄之 · 发表于 2025-3-20 22:25:30

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯CSS折叠面板</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .accordion {
            margin: 20px 0;
        }
        
        details {
            margin-bottom: 10px;
            border-radius: 5px;
            overflow: hidden;
            background-color: #f5f5f5;
        }
        
        summary {
            display: list-item;
            list-style: none;
            padding: 15px;
            margin: 0;
            cursor: pointer;
            background-color: #e0e0e0;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-weight: bold;
            outline: none;
        }
        
        summary::-webkit-details-marker {
            display: none;
        }
        
        summary::before {
            content: "+";
            margin-right: 5px;
            color: #666;
        }
        
        details[open] summary::before {
            content: "-";
        }
        
        details[open] {
            border: 1px solid #ccc;
        }
        
        details p {
            padding: 15px;
            margin: 0;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <h1>纯CSS折叠面板</h1>
    
    <div class="accordion">
        <details open>
            <summary>折叠面板1</summary>
            <p>这是第一个折叠面板的内容。你可以在这里放置任何HTML内容，比如文字、图片、链接等。</p>
        </details>
        
        <details>
            <summary>折叠面板2</summary>
            <p>这是第二个折叠面板的内容。折叠面板在默认情况下是关闭的，点击标题可以展开或折叠。</p>
        </details>
        
        <details>
            <summary>折叠面板3</summary>
            <p>这是第三个折叠面板的内容。使用纯CSS实现折叠面板的好处是不需要JavaScript，简单易用。</p>
        </details>
    </div>
</body>
</html>

[网站教程] 纯CSS折叠面板

免责声明

回复

浏览过的版块

最佳新人

荣誉管理

灌水之王

宣传达人

2025蛇年限定

活跃会员

突出贡献

关于我们

热门板块

jiubbs2025@163.com