Logo

菜单

发布于 2026-01-06 0 阅读
0

使用 HTML、CSS 和 JavaScript 创建易于访问的手风琴

使用 HTML、CSS 和 JavaScript 创建易于访问的手风琴

在开发和设计阶段，手风琴式面板是一种图形控制元素，它由垂直堆叠的标题和隐藏的内部内容组成。点击标题后，之前折叠/隐藏的内容框会展开以显示其内容；通常是文本、图像或其他分组信息。

你可能在常见问题解答页面上见过（或使用过）手风琴式菜单，问题显示在标题中，而这些问题的答案则隐藏在内容框中。

在信息量丰富的网页和应用程序页面上，手风琴式折叠面板可以提升用户体验。开发者可以将所有信息集中在一个页面上，但只显示级别较高的标题。这样，用户就能快速浏览所有标题，而不会被细节信息淹没。他们可以更轻松地找到并点击感兴趣的标题，从而访问更详细的内容。

有无数的小部件、插件和其他代码片段可以自动为你的网站或应用添加手风琴效果。但你也可以只用 HTML、CSS 和 JavaScript 构建一个简单的手风琴效果。

手风琴 HTML

<ul id="accordion">
  <li>
    <button aria-controls="content-1" aria-expanded="false" id="accordion-control-1">FAQ 1</button>
    <div class="acc-item-content" aria-hidden="true" id="content-1">
      <p>Answer 1!</p>
    </div>
  </li>
  <li>
    <button aria-controls="content-2" aria-expanded="false" id="accordion-control-2">FAQ 2</button>
    <div class="acc-item-content" aria-hidden="true" id="content-2">
      <p>Answer 2</p>
    </div>
  </li>
  <li>
    <button aria-controls="content-3" aria-expanded="false" id="accordion-control-3">FAQ 3</button>
    <div class="acc-item-content" aria-hidden="true" id="content-3">
      <p>Answer 3</p>
    </div>
  </li>
  <li>
    <button aria-controls="content-4" aria-expanded="false" id="accordion-control-4">FAQ 4 </button>
    <div class="acc-item-content" aria-hidden="true" id="content-4">
      <p>Answer 4</p>
    </div>
  </li>
  <li>
    <button aria-controls="content-5" aria-expanded="false" id="accordion-control-5">FAQ 5</button>
    <div class="acc-item-content" aria-hidden="true" id="content-5">
      <p>Answer 5</p>
    </div>
  </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

在 HTML 中，我们的整个手风琴组件都放在一个无序列表中。每个列表项包含一个带有内部内容的 div 元素和一个用于切换该 div 元素可见性的按钮。为了提高手风琴组件的可访问性，我们为其添加了 `display: none`aria-expanded和 ` display: none` 属性，按钮上aria-hidden也添加了与div 元素 ID 对应的属性。这些属性将帮助使用屏幕阅读器的用户理解我们的手风琴组件，以及点击按钮后哪些内容可见，哪些内容不可见。aria-controlsacc-item-content

我的文本也放在了段落标签中，如果你的内容 div 中有不止几个句子，这将很有帮助。

希望你在某个地方使用了循环来动态创建每个列表项及其子元素。

手风琴 CSS

ul {
  list-style: none;
}

#accordion button:focus {
  border-radius: 0px;
  outline: none;
}
#accordion button {
  outline: none;
  background-color: DarkSeaGreen;
  padding: 10px;
  border: none;
  border-bottom: 1px solid darkslategrey;
  color: white;
  width: 100%;
  text-align: left;
  font-size: 16px;
  border-radius: 0px;
}
#accordion li {
  border: 1px solid DarkSlateGray;
  border-bottom: none;
}
.acc-item:last-child {
  border-bottom: 1px solid DarkSlateGray;
}
#accordion button::after {
  content: "\002B";
  font-weight: 900;
  font-size: 22px;
  float: right;
}

#accordion {
  width: 80%;
  max-width: 800px;
  min-width: 275px;
  margin: auto;
}
Enter fullscreen mode Exit fullscreen mode

大部分 CSS 代码都用于……样式。我们添加背景颜色、边框和伪内容，以视觉方式表明这是一个手风琴式展开图，点击即可查看更多内容。

严格来说，你只需要这一条规则：

.acc-item-content {
  padding: 0px 10px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
Enter fullscreen mode Exit fullscreen mode

它将内容 div 的高度设置为 0（使其不可见）；并为最大高度设置过渡样式和速度。这在我们编写 JavaScript 代码时会非常有用，届时我们将在按钮点击时更改 div 的最大高度值。

手风琴 JavaScript

window.addEventListener("DOMContentLoaded", (event) => {
  let buttons = document.querySelectorAll("#accordion button");
  buttons.forEach((button) => {
    let content = button.nextElementSibling;
    button.addEventListener("click", (event) => {
      if (button.classList.contains("active")) {
        button.classList.remove("active");
        button.setAttribute("aria-expanded", false);
        content.style.maxHeight = null;
        content.setAttribute("aria-hidden", true);
      } else {
        button.classList.add("active");
        button.setAttribute("aria-expanded", true);
        content.style.maxHeight = content.scrollHeight + "px";
        content.setAttribute("aria-hidden", false);
      }
    });
  });
});
Enter fullscreen mode Exit fullscreen mode

伪代码如下：

When all the DOM content is loaded...

  Collect all the buttons that are child elements of the element 
  with the id #accordion...

  Loop through each of these buttons...
     Grab the button's sibling element and save it in a variable 
     called content AND

     Add an event listener to each button, so that when the 
     button is clicked...

       If the button has the class active...
           Remove "active" from its class list AND

           Set its aria-expanded attribute to false AND

           Set the content variable's max-height value to null AND

           Set the content variable's aria-hidden attribute to true.

       Otherwise, if the button doesn't have the class active...
            Add "active" to its class list AND

           Set its aria-expanded attribute to true AND

           Set the content variable's max-height value even 
           to the value of the content variable's scroll height 
           (the height of an element's content) AND

           Set the content variable's aria-hidden attribute to false.
Enter fullscreen mode Exit fullscreen mode

就这样：一个简单易用的折叠面板，仅使用 HTML、CSS 和原生 JavaScript 就制作完成！

文章来源：https://dev.to/lizlaffitte/creating-an-accordion-with-html-css-javascript-3gmn
为什么你不使用 GitLab？DE...
发布服务器端 Kotlin 应用程...