jQuery Accordion

Accordion 是一种常用的交互式组件，通常用于展示具有标题和内容区块的折叠面板。当用户点击标题时，内容区块会展开或折叠。在本章节中，我们将学习如何使用 jQuery 创建一个简单的 Accordion 组件。

创建 HTML 结构

首先，我们需要创建一个基本的 HTML 结构，包含标题和内容区块。以下是一个简单的示例：

// www.javascriptcn.com code example
<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-title">Section 1</div>
    <div class="accordion-content">Content for Section 1</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-title">Section 2</div>
    <div class="accordion-content">Content for Section 2</div>
  </div>
</div>

编写 CSS 样式

为 Accordion 添加一些基本的 CSS 样式，使其看起来更加美观和易于交互。以下是一个简单的示例：

// www.javascriptcn.com code example
.accordion {
  width: 100%;
}

.accordion-item {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.accordion-title {
  background-color: #f0f0f0;
  padding: 10px;
  cursor: pointer;
}

.accordion-content {
  display: none;
  padding: 10px;
}

使用 jQuery 实现 Accordion

接下来，我们将使用 jQuery 实现 Accordion 的交互功能。我们将为每个标题元素添加一个点击事件，当用户点击标题时，展开或折叠对应的内容区块。

$(document).ready(function() {
  $('.accordion-title').click(function() {
    var $content = $(this).next('.accordion-content');
    
    $('.accordion-content').not($content).slideUp();
    $content.slideToggle();
  });
});

在上面的代码中，我们首先使用 $(document).ready() 方法确保页面加载完成后再执行 jQuery 代码。然后为所有的标题元素添加了一个点击事件，当用户点击标题时，我们首先隐藏所有的内容区块，然后展开或折叠当前点击的内容区块。

通过以上步骤，我们成功实现了一个简单的 Accordion 组件。你可以根据实际需求对样式和交互功能进行定制和扩展。