将图像添加到折叠面板页眉，并在页面加载时保持打开折叠面板

基础概念

折叠面板（Accordion Panel）是一种常见的用户界面组件，允许用户通过点击标题栏来展开或折叠内容区域。图像添加到折叠面板的页眉可以增强视觉效果和用户体验。

类型

折叠面板通常分为以下几种类型：

单选折叠面板：一次只能展开一个面板。
多选折叠面板：可以同时展开多个面板。
手风琴折叠面板：展开一个面板时，其他面板会自动折叠。

应用场景

折叠面板广泛应用于网页设计中，特别是在需要展示大量信息且希望保持页面整洁的情况下，例如：

产品详情页
帮助文档
设置页面

实现方法

以下是一个使用HTML和CSS实现将图像添加到折叠面板页眉，并在页面加载时保持打开折叠面板的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accordion Panel with Image</title>
    <style>
        .accordion {
            width: 100%;
            max-width: 400px;
            margin: 20px auto;
        }
        .accordion-item {
            border: 1px solid #ccc;
            margin-bottom: 10px;
        }
        .accordion-header {
            display: flex;
            align-items: center;
            padding: 10px;
            cursor: pointer;
            background-color: #f1f1f1;
        }
        .accordion-header img {
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        .accordion-content.active {
            max-height: 500px; /* 设置一个足够大的值 */
            transition: max-height 0.3s ease-in;
        }
    </style>
</head>
<body>
    <div class="accordion">
        <div class="accordion-item">
            <div class="accordion-header" onclick="toggleAccordion(this)">
                <img src="https://via.placeholder.com/30" alt="Image">
                <h3>Panel 1</h3>
            </div>
            <div class="accordion-content active">
                <p>This is the content of Panel 1.</p>
            </div>
        </div>
        <div class="accordion-item">
            <div class="accordion-header" onclick="toggleAccordion(this)">
                <img src="https://via.placeholder.com/30" alt="Image">
                <h3>Panel 2</h3>
            </div>
            <div class="accordion-content">
                <p>This is the content of Panel 2.</p>
            </div>
        </div>
    </div>

    <script>
        function toggleAccordion(header) {
            const content = header.nextElementSibling;
            content.classList.toggle('active');
        }
    </script>
</body>
</html>