基础 CSS 折叠标签介绍

什么是折叠标签

折叠标签是一种HTML和CSS技术，用于在网页中创建可展开/可折叠的内容区域。通过点击标题或按钮，可以显示或隐藏与之相关的内容。

在程序开发中，折叠标签常用于展示和隐藏代码块、文本段落、菜单、导航等，以便节省页面空间或提供更好的用户体验。

基础折叠标签实现

基础的折叠标签可以通过CSS的display属性和JavaScript来实现。下面是一个基础的折叠标签实现示例：

<details>
    <summary>折叠标签标题</summary>
    <p>要折叠的内容。</p>
</details>

在上述示例中，<details>是折叠标签的容器元素，<summary>是标题元素，<p>是要折叠的内容。

为了使折叠标签能够运行，我们还需要为标题元素添加一些CSS样式，以及一些JavaScript代码：

summary {
    cursor: pointer;
}

summary:hover {
    text-decoration: underline;
}

details[open] summary::before {
    content: "-";
}

details:not([open]) summary::before {
    content: "+";
}

var summaries = document.querySelectorAll('summary');

Array.prototype.forEach.call(summaries, function(summary) {
    summary.addEventListener('click', function() {
        this.parentNode.toggleAttribute('open');
    });
});

上述CSS代码中，我们定义了鼠标悬停时标题元素的样式以及展开标记（+或-）的样式。

而JavaScript代码则负责在点击标题元素时切换折叠内容的展开和隐藏状态。

进阶折叠标签实现

除了基础的折叠标签，还可以通过CSS框架、JavaScript库或自定义CSS和JavaScript代码来实现进阶的折叠功能。

例如，使用Bootstrap框架可以通过以下代码来实现折叠标签：

<div class="accordion">
    <div class="accordion-header" id="headingOne">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            折叠标签标题
        </button>
    </div>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent=".accordion">
        <div class="accordion-body">
            要折叠的内容。
        </div>
    </div>
</div>

上述示例使用了Bootstrap框架的折叠组件，只需简单地设置相应的类和属性即可实现折叠标签。

除此之外，还可以使用其他CSS框架（如Foundation、Bulma等）或自定义CSS和JavaScript代码来实现不同风格和功能的折叠标签。

总之，折叠标签是一种非常有用且常见的技术，在程序开发中经常用于创建可展开/可折叠的内容区域。使用基础的CSS和JavaScript，或者借助框架和库，开发者可以轻松地实现各种风格的折叠标签，为用户提供更好的交互体验。