Semantic-UI 手风琴变奏

Semantic-UI 是一个流行的前端框架，拥有强大的组件库和易于使用的API。其中的手风琴组件是一个非常实用的工具，可以让用户轻松收缩和展开内容。

如何使用

要使用 Semantic-UI 手风琴组件，需要先导入所需的CSS和JS文件。我们可以从CDN或本地项目中导入这些文件，例如：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

接下来，在 HTML 中创建手风琴：

<div class="ui styled accordion">
  <div class="title">
    <i class="dropdown icon"></i>
    What is a dog?
  </div>
  <div class="content">
    <p>A dog is a type of domesticated mammal.</p>
  </div>
  <div class="title">
    <i class="dropdown icon"></i>
    What kinds of dogs are there?
  </div>
  <div class="content">
    <p>There are many breeds of dogs.</p>
  </div>
  <div class="title">
    <i class="dropdown icon"></i>
    How do you acquire a dog?
  </div>
  <div class="content">
    <p>You can adopt a dog from a shelter or buy one from a breeder.</p>
  </div>
</div>

以上代码会创建一个默认的手风琴，其中包含三个主题和对应的内容。每个主题上方都有一个小箭头，点击该箭头可以展开或收缩内容。

添加动态内容

要添加动态内容，我们可以使用JavaScript代码：

<div class="ui styled accordion">
  <div class="active title">
    <i class="dropdown icon"></i>
    What is a dog?
  </div>
  <div class="active content">
    <p>A dog is a type of domesticated mammal.</p>
  </div>
</div>

<script>
  $(document).ready(function() {
    $('.ui.accordion').accordion();
    var $content = $("<p>Some new content</p>");
    $('.ui.accordion').append($('<div>').addClass('title').text('New Title').append($('<i>').addClass('dropdown icon'))).append($('<div>').addClass('content').append($content));
  });
</script>

以上代码会创建一个默认的手风琴，其中包含一个主题和一个对应的内容。然后，它会使用 JavaScript 将另一个主题和内容添加到手风琴中。

样式定制

虽然 Semantic-UI 的手风琴组件提供了许多漂亮的主题和默认样式，但如果我们想要自定义样式，也可以很容易地进行修改。例如：

<div class="ui accordion">
  <div class="active title" style="background-color: #2185d0; color: #fff;">
    <i class="dropdown icon"></i>
    What is a dog?
  </div>
  <div class="active content" style="background-color: #d4d4d5; color: #000;">
    <p>A dog is a type of domesticated mammal.</p>
  </div>
</div>

以上代码定制了手风琴标题和内容的背景和颜色。如果我们希望在多个手风琴上使用这些样式，可以将样式定义为 CSS 类。

总结

Semantic-UI 的手风琴组件是一个非常实用的工具，可以让用户轻松收缩和展开内容。我们可以使用简单的HTML、CSS和JavaScript代码快速创建一个手风琴，并对其样式进行自定义。