jQuery 手风琴切换关闭打开

在 Web 开发中，手风琴是一种非常常见的 UI 组件，通常用于展示多个相关内容，同时只展开其中一个，其他内容则折叠。本文将介绍如何使用 jQuery 实现手风琴组件的切换关闭和打开。

HTML 结构

我们先来看一下手风琴的 HTML 结构。一个简单的手风琴应该包含一个外层容器以及多个内容容器，如下所示：

<div class="accordion">
  <div class="accordion__item">
    <div class="accordion__title">
      Title 1
    </div>
    <div class="accordion__content">
      Content 1
    </div>
  </div>
  <div class="accordion__item">
    <div class="accordion__title">
      Title 2
    </div>
    <div class="accordion__content">
      Content 2
    </div>
  </div>
  <div class="accordion__item">
    <div class="accordion__title">
      Title 3
    </div>
    <div class="accordion__content">
      Content 3
    </div>
  </div>
</div>

其中，.accordion 为外层容器，.accordion__item 为每个内容容器，.accordion__title 为每个内容容器的标题，.accordion__content 为每个内容容器的内容。

CSS 样式

由于手风琴是一个常用的 UI 组件，可以考虑编写通用的 CSS 样式。以下样式为一个基本样式示例：

.accordion {
  border: 1px solid #ccc;
}
.accordion__item {
  border-bottom: 1px solid #ccc;
}
.accordion__title,
.accordion__content {
  padding: 10px;
}
.accordion__title {
  background-color: #eee;
  cursor: pointer;
}
.accordion__content {
  display: none;
}
.accordion__item.active .accordion__content {
  display: block;
}

其中，.accordion__title 设置了背景色和手形光标，.accordion__content 设置为隐藏状态。当 .accordion__item 有 .active 类名时，.accordion__content 显示。

jQuery 代码

接下来是实现手风琴切换的 jQuery 代码。我们需要监听 .accordion__title 的点击事件，来切换 .active 类：

$(function() {
  $('.accordion__title').click(function() {
    $(this).parent().toggleClass('active');
    $(this).siblings('.accordion__content').slideToggle();
    $(this).parent().siblings().removeClass('active').children('.accordion__content').slideUp();
  });
});

首先，当 .accordion__title 被点击时，我们使用 toggleClass() 切换 .active 类。接着，使用 slideToggle() 方法来切换 .accordion__content 的显示与隐藏状态。最后，我们需要将当前 .accordion__item 除去 .active 类，同时将其他 .accordion__item 的 .active 类移除。这样就保证了每次只有一个 .accordion__item 被展开。

总结

至此，我们成功实现了手风琴的切换功能。通过 CSS 样式和 jQuery 代码的配合，可以编写出非常通用的 UI 组件，为 Web 开发带来极大的便利。