CSS 中的手风琴

2025年3月17日 | 阅读 10 分钟

CSS 中的手风琴模式是一种用户界面，由垂直堆叠的可折叠和可展开的项目（如面板或部分）组成。在这种模式下，一次只能打开一个项目，因为每个项目通常都有一个标题部分和实际内容。另一方面，点击项目的标题会使其显示其内容，而其余部分则会隐藏。

通常由几个垂直堆叠的项目组成，每个项目都有一个标题和内容部分。通过一次只显示一个面板并提供一个易于使用的机制，让用户根据需要展开和折叠各个部分，其主要目标是节省屏幕空间。

要在 CSS 中创建手风琴，您可以使用 HTML、CSS，有时还需要一些 JavaScript 或 jQuery 来实现交互性。

CSS 中的手风琴是什么意思？

CSS 中的手风琴菜单是一种图形元素，由垂直堆叠的项目列表组成。点击此菜单可以显示或隐藏与其关联的内容。如果网站有 FAQ 部分，那么每个网站的至少一个页面中都包含 CSS 手风琴。

让我们看看 CSS 中手风琴的各种示例。

示例

示例 1： 这是一个简单的示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* Style for the accordion */
    .accordion {
      display: flex;
      flex-direction: column;
      max-width: 300px; /* Set the maximum width as needed */
    }

    /* Style for accordion items (panels) */
    .accordion-item {
      border: 1px solid #ddd;
      margin-bottom: 5px;
    }

    /* Style for accordion item headers */
    .accordion-item-header {
      padding: 10px;
      cursor: pointer;
      background-color: #f1f1f1;
    }

    /* Style for accordion item content */
    .accordion-item-content {
      display: none;
      padding: 10px;
    }

    /* Style to show the active (expanded) item */
    .accordion-item.active .accordion-item-content {
      display: block;
    }
  </style>
</head>
<body>

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-item-header">Section 1</div>
    <div class="accordion-item-content">
      <p>Content for Section 1 goes here.</p>
    </div>
  </div>
  
  <div class="accordion-item">
    <div class="accordion-item-header">Section 2</div>
    <div class="accordion-item-content">
      <p>Content for Section 2 goes here.</p>
    </div>
  </div>

  <!-- Add more accordion items as needed -->
</div>
</body>
</html>

此示例中的每个手风琴项目都包含一个标题和内容部分。这些元素使用 CSS 进行样式设置，并控制其可见性。通过点击标题来切换相关内容部分的可见性将属于 JavaScript 或 jQuery 的范畴。

请记住，上面的示例是一个基本实现；有许多变体和库可用于创建手风琴。

示例 2

<! DOCTYPE html>
<html>
<head>
<title> Accordion CSS Example </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
  font-family: 'Flamenco', serif;
}
h1 {
  color: #fff;
  font-weight: normal;
  font-size: 2.5rem;
  text-align: center;
}
.readme {
  color: #fff;
  margin: 0 auto;
  width: 80%;
    a {
    color: #00a486;
  }
}
.accordion {
  position: relative;
  margin: 60px auto;
  width: 80%;
}
[id*="open-accordion"] {
  background: #698c86;
  border-bottom: 1px solid #fff;
  line-height: 40px;
  height: 40px;
  display: block;
  margin: 0 auto;
  position: relative;
  width: 99%;
}
[id*="close-accordion"] {
  display: none;
}
[id*="close-accordion"] {
  background: #698c86;
  border-bottom: 1px solid #fff;
  line-height: 40px;
  height: 40px;
  display: block;
  margin: 0 auto;
  position: relative;
  width: 99%;
}
.accordion a {
  color: #fff;
  font-size: 1.25em;
  font-weight: normal;
  padding-left: 2%;
  text-decoration: none;
  text-shadow: none;
}
[id*="open-accordion"]:after {
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(255, 255, 255, 0.6);
  position: absolute;
  right: 5px;
  top: 15px;
  z-index: 999;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}
.target-fix {
  display: block;
  top: 0;
  left: 0;
  position: fixed;
}
[id*="close-accordion"]:after {
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(255, 255, 255, 0.6);
  position: absolute;
  right: 5px;
  top: 15px;
  z-index: 999;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}
.accordion-content {
  background: #fff;
  height: 0;
  margin: -1px auto 0;
  padding: 0 2.5%;
  position: relative;
  overflow: hidden;
  width: 90%;
  transition: all 0.1s ease;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
}
.accordion span:target ~ .accordion-content {
  display: block;
  height: auto;
  padding-bottom: 25px;
  padding-top: 10px;
}
.accordion span:target ~ [id*="close-accordion"] {
  display: block;
}
.accordion span:target ~ [id*="open-accordion"] {
  display: none;
}
.accordion span:target ~ [id*="close-accordion"]:after {
  border-top: 10px solid #333;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}
</style>
</head>
<body>
<h1> CSS Accordion Example </h1>
<div class="accordion">
        <span class="target-fix" id="accordion"> </span>
            <div>
   <span class="target-fix" id="accordion1"> </span> 
   <a href="#accordion1" id="open-accordion1" title="open"> First Accordion Example </a>
   <a href="#accordion" id="close-accordion1" title="close"> Second Accordion Example </a> 
                <div class="accordion-content">
                <p> Accordion 1 Content </p>
            </div>
        </div>
              <div>
            <span class="target-fix" id="accordion2"> </span>
            <a href="#accordion2" id="open-accordion2" title="open"> Second Accordion </a>
            <a href="#accordion" id="close-accordion2" title="close"> Second Accordion </a>
            <div class="accordion-content">
                <p> Accordion 2 Content. </p>       
            </div>
        </div>
             <div>
            <span class="target-fix" id="accordion3"> </span>
            <a href="#accordion3" id="open-accordion3" title="open"> Third Accordion </a>
            <a href="#accordion" id="close-accordion3" title="close"> Third Accordion </a>
            <div class="accordion-content">
                <p> Accordion 3 Content </p>
            </div>
        </div>
    </div>
</body>
</html>

说明

在上面的示例中，我们借助 CSS 创建了一个手风琴。当我们点击特定部分时，该部分的描述会打开。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>
<html>
<head>
<title> Accordion CSS Example </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,800);
body {
  padding: 20px;
  font: lighter 1.2em/100% 'Open Sans';
  text-align: left;
  background: #eee;
}
 body {
 text-align: center;
 }
.faq {
  width: 80%;
  margin: 0 auto;
}
.centerplease {
  text-align:center;
  margin:0 auto;
  font-size: 40px;
}
.question {
  color: #fff;
  font-weight: normal;
  position: relative;
  background: #4892c7;
  margin: 0 auto;
  opacity: .9;
  padding: 10px 10px 10px 50px;
  display: block;
  cursor: pointer;
  text-shadow:-1px 1px 0px #4892c7, -2px 2px 0px #2a4163;
}
.answers {
  border-top: 1px solid #2a4163;
  background: white;
  padding: 0px 15px;
  margin: 0 0 7px 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  position: relative;
  opacity: 0;
  -webkit-transition: .7s ease;
  -moz-transition: .7s ease;
  -o-transition: .7s ease;
  transition: .7s ease;
}
.questions:checked ~ .answers{
  height: auto;
  opacity: 1;
  padding: 15px;
}
.plus {
  position: absolute;
  margin-left: 10px;
  z-index: 5;
  font-size: 1.8em;
  line-height: 100%;
  -webkit-user-select: none;    
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;
}
.questions:checked ~ .plus {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.questions {
  display: none;
}
 h1 {
  position: relative;
  padding: 0;
  margin: 10;
  font-weight: 300;
  font-size: 50px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
  font-style: italic; font-family: "Playfair Display","Bookman",serif;
}
 h2 {
 font-style: italic; font-family: "Playfair Display","Bookman",serif;
 color:#999; letter-spacing:-0.005em; word-spacing:1px;
 font-size: 1.25em;
  font-weight: bold;
  }
</style>
<body>
<div class='centerplease'>
  <h1> Example: FAQ's using Accordion in CSS </h1>
</div>
<br>
<div class="faq">
<div>
  <input type="checkbox" id="question1" name = "q"  class="questions">
  <div class="plus">  +  </div>
  <label for="question1" class="question">
   <h2> This is the question that will be asked? </h2>
  </label>
  <div class="answers">
   <h2> What if the answer is really long and wraps the whole page and you never want to finish it but you have to because it?s the answer! </h2>
  </div>
</div>
<div>
  <input type="checkbox" id="question2" name="q" class="questions">
  <div class="plus"> + </div>
  <label for="question2" class="question">
    <h2> Short Question? </h2>
  </label>
  <div class="answers">
    <h2> short! </h2>
  </div>
</div>
<div>
  <input type="checkbox" id="question3" name="q" class="questions">
  <div class="plus"> + </div>
  <label for="question3" class="question">
    <h2> But what if the question is really long and wraps the whole page and you feel like you will never finish reading the question? </h2>
  </label>
  <div class="answers">
   <h2> this is the answer! </h2>
  </div>
</div>
</div>
</body>
</html>

说明

在上面的示例中，我们借助 CSS 创建了一个手风琴。当我们点击特定部分时，该部分的描述会打开。

输出

以下是此示例的输出

示例 4

<! DOCTYPE html>
<html>
<head>
<title> Accordion CSS Example </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html { 
  min-width: 150px;
  height: 100%;
  margin: 0 auto;
  overflow-y: scroll;
  font-family:  sans-serif;
  color: rgba(48, 69, 92, 0.8);
}
.accordion-bral {
  min-height: 0;
  min-width: 220px;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  margin: 0px!important;
}
.accordion-bral .ac-label {
  font-family: Arial, sans-serif;
  padding: 5px 20px;
  position: relative;
  display: block;
  height: auto;
  cursor: pointer;
  color: #777;
  line-height: 33px;
  font-size: 19px;
  background: #EFEFEF;
  border: 1px solid #CCC;
}
.accordion-bral .ac-label:hover {
  background: #BBB;
}
.accordion-bral input + .ac-label {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.accordion-bral input:checked + .ac-label,
.accordion-bral input:checked + .ac-label:active {
  background-color: rgba(79, 79, 79, 0.5) !important;
  color: #FFF;
  box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3), 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.accordion-bral input.ac-input {
  display: none;
}
.accordion-bral .article {
  background: rgb(240, 240, 240);
  overflow: hidden;
  height: 0px;
  max-height: auto;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.accordion-bral .article p {
  color: #777;
  line-height: 23px;
  font-size: 14px;
  padding: 20px;
}
.accordion-bral input:checked ~ .article i {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.accordion-bral input:checked ~ .article.ac-content {
  height: auto;
}
.accordion-bral i {
  position: absolute;
  transform: translate(-30px, 0);
  margin-top: 16px;
  right: 0;
}
.accordion-bral input:checked ~ .ac-label i:before {
  transform: translate(2px, 0) rotate(-45deg);
}
.accordion-bral input:checked ~ .ac-label i:after {
  transform: translate(-2px, 0) rotate(45deg);
}
.accordion-bral i:before {
  content: "";
  position: absolute;
  background-color: #808080;
  width: 3px;
  height: 9px;
}
.accordion-bral i:before {
  transform: translate(-2px, 0) rotate(-45deg);
}
.accordion-bral i:after {
  transform: translate(2px, 0) rotate(45deg);
}
accordion-bral i:after {
  content: "";
  position: absolute;
  background-color: #808080;
  width: 3px;
  height: 9px;
}
ul.ac-list {
  padding-left: 40px;
  list-style-type: disc;  
}
table.ac-table {
  margin: 20px 0 20px 20px;
}
table.ac-table th {
  text-align: left;
}
@media (max-width: 550px) {
  .accordion-bral .ac-label {
  font-family: Arial, sans-serif;
  padding: 5px 20px;
  position: relative;
  display: block;
  height: auto;
  padding-right: 40px;
  cursor: pointer;
  color: #777;
  line-height: 33px;
  font-size: 19px;
  background: #EFEFEF;
  border: 1px solid #CCC;
}
  .accordion-bral i {
  position: absolute;
  transform: translate(-30px, 0);
  margin-top: 2%;
  right: 0;
}
}
</style>
<body>
<div class="accordion-bral">
  <div> 
    <input class="ac-input" id="ac-1" name="accordion-1" type="checkbox" checked/>
    <label class="ac-label" for="ac-1"> HTML and CSS only <i> </i> </label>
    <div class="article ac-content">
      <div>
        <table class="ac-table" border="1" style="width:70%">
          <tr>
            <th> Name </th>
            <th> Surname </th>
            <th> Age </th>
          </tr>
          <tr>
            <td> Jill </td>
            <td> Smith </td>
            <td> 50 </td>
          </tr>
          <tr>
            <td> Eve </td>
            <td> Jackson </td>
            <td> 94 </td>
          </tr>
        </table>
      </div>
      <br>
    </div>
  </div>
  <div>
    <input class="ac-input" id="ac-2" name="accordion-1" type="checkbox" checked/>
    <label class="ac-label" for="ac-2"> responsive accordion <i> </i> </label>
    <div class="article ac-content">
      <div style="padding: 0 30px 30px 60px; width:100%;"> <img src="logo 1.png"> </div>
    </div>
  </div>
  <div>
  <div>
    <input class="ac-input" id="ac-4" name="accordion-1" type="checkbox" />
    <label class="ac-label" for="ac-4"> Forms example <i> </i> </label>
    <div class="article ac-content">
      <div style="padding: 0 0 40px 40px;">
      <form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
        <div class="row">
          <label for="name">Your name: </label>
          <br />
          <input id="name" class="input" name="name" type="text" value="" size="30" />
          <br />
        </div>
        <div class="row">
          <label for="email"> Your email: </label>
          <br />
          <input id="email" class="input" name="email" type="text" value="" size="30" />
          <br />
        </div>
        <div class="row">
          <label for="message"> Your message: </label>
          <br />
          <textarea id="message" class="input" name="message" rows="7" cols="30"> </textarea>
          <br />
        </div>
        <input id="submit_button" type="submit" value="Send email" />
      </form>
      </div>
    </div>
  </div>
</div>
</body>
</html>

说明

在上面的示例中，我们借助 CSS 创建了一个手风琴。当我们点击特定部分时，该部分的描述会打开。

输出

以下是此示例的输出

性质

根据您想要实现的确切设计和组织，您可以使用 CSS 中的各种属性来创建手风琴式界面。以下是一些典型的特性及其解释：

1. 显示属性

Display： 此属性通常设置为 flex 或 grid 以控制手风琴项目的布局。

2. 边框属性

Border： 用于设置手风琴项目或面板的边框。

3. 外边距和内边距属性

Margin： 指定手风琴项目的外部边距。
Padding： 指定手风琴项目的内部填充。

4. 光标属性

Cursor： 确定当鼠标悬停在手风琴标题上时显示的光标类型。它通常设置为指针以指示交互性。

5. 背景属性

Background-color： 设置手风琴标题或面板的背景颜色。

6. 过渡属性

Transition： 用于在手风琴项目展开或折叠时添加平滑过渡。它指定要过渡的 CSS 属性和过渡的持续时间。

7. 定位属性

Position： 确定手风琴项目的定位方法。在某些情况下，它可能设置为 relative 或 absolute。

8. 溢出属性

Overflow： 指定如何处理超出框的内容。它可能设置为隐藏超出手风琴项目的内容。

9. 可见性属性

Visibility： 用于控制手风琴项目的可见性。当项目折叠时可能设置为隐藏，展开时设置为可见。

10. 高度属性和最大高度属性

Height： 设置手风琴项目的高度。它可能用于控制项目展开前的默认高度。
Max height： 指定手风琴项目可以具有的最大高度，通常与过渡一起使用以实现平滑的动画效果。

这些属性只是一个起点；实际使用的属性将由手风琴的独特设计和布局规范决定。此外，动态行为和交互性可能由 JavaScript 等脚本语言处理。

结论

总之，手风琴是 CSS 中一种灵活的用户界面模式，它将内容创建为可折叠的面板，从而节省屏幕空间并改善用户导航。设计师使用 display、transition 和 height 等属性来创建具有流畅动画的精美界面。

在许多情况下，JavaScript 增强了 CSS，允许交互功能，例如点击标题展开。这种动态、节省空间的设计使信息易于阅读和排列，从而促进用户友好的在线体验。

下一主题如何将 Legend 标签居中对齐

CSS 中的手风琴

CSS 中的手风琴是什么意思？

示例

示例 2

示例 3

示例 4

性质

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS 中的手风琴

CSS 中的手风琴是什么意思？

示例

示例 2

示例 3

示例 4

性质

结论

相关帖子

CSS 文本动画

CSS 中如何对齐文本

CSS 中如何更改字体

White Space

CSS 的优点

如何在屏幕中心对齐 Legend 标签

Custom Scrollbar CSS

CSS 中如何更改背景颜色

CSS 中如何更改链接颜色

CSS 中如何垂直对齐文本

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器