bootstrap手风琴_快速提示：如何自定义Bootstrap 4的手风琴组件

bootstrap手风琴

在此快速提示中，我们将构建Bootstrap 4手风琴，通过一些CSS更改对其进行定制，并应用一些JavaScript定制。 让我们开始吧！

注意 ：本教程假定您对Bootstrap 4 有所了解。

什么是Bootstrap组件？

Bootstrap具有大量（但不占绝大多数）的组件集合，您可以在项目中使用它们。 其中包括警报，徽章，面包屑，按钮，卡片，转盘-清单还在不断增加！ 在某些情况下，Bootstrap倾向于不打扰，而是提供原始成分来构建您自己的组件。 我们今天要建立的就是这种情况。 查看Bootstrap组件文档以获取更多详细信息。

1.包括字体真棒图标

就本教程而言，除了必需CSS和JavaScript Bootstrap文件之外，我还将Font Awesome图标包合并到了笔中。 我们可以通过直接从CSS设置链接到Font Awesome CDN来做到这一点：

2.构建简单的手风琴

为了创建我们的手风琴，我们将依赖于Bootstrap提供的折叠组件的一些示例代码。

“折叠JavaScript插件用于显示和隐藏内容。 按钮或锚点用作触发器，映射到您切换的特定元素。”

我们的手风琴将包含三个可折叠的元素：

<div id="accordion" class="myaccordion">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

第一个可折叠项中的内容如下：包含标题和按钮的标头div ，以及包含正文内容的第二个div （在这种情况下为列表）。

<div class="card-header" id="headingOne">
  <h2 class="mb-0">
    <button class="d-flex align-items-center justify-content-between btn btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
      Undergraduate Studies
      <span class="fa-stack fa-sm">
        <i class="fas fa-circle fa-stack-2x"></i>
        <i class="fas fa-plus fa-stack-1x fa-inverse"></i>
      </span>
    </button>
  </h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
  <div class="card-body">
    <ul>
      <li>Computer Science</li>
      <li>Economics</li>
      <li>Sociology</li>
      <li>Nursing</li>
      <li>English</li>
    </ul>
  </div>
</div>

请注意，由于Font Awesome附带的支持样式，我们在按钮中堆叠了多个图标 。

完成后，我们为其余两个可折叠项目添加内容。

3.添加一些基本样式

接下来，我们为组件指定一些CSS规则。 没什么花哨的，只有一些基本的颜色和上浆样式可以使外观看起来更加独特。

.myaccordion {
  max-width: 500px;
  margin: 50px auto;
  box-shadow: 0 0 1px rgba(0,0,0,0.1);
}

.myaccordion .card,
.myaccordion .card:last-child .card-header {
  border: none;
}

.myaccordion .card-header {
  border-bottom-color: #EDEFF0;
  background: transparent;
}

.myaccordion .fa-stack {
  font-size: 18px;
}

.myaccordion .btn {
  width: 100%;
  font-weight: bold;
  color: #004987;
  padding: 0;
}

.myaccordion .btn-link:hover,
.myaccordion .btn-link:focus {
  text-decoration: none;
}

.myaccordion li + li {
  margin-top: 10px;
}

干得好！ 到目前为止，我们的组件如下所示：

4.定制

放置好HTML和CSS之后，让我们看一些可以添加到手风琴中的有用的自定义设置。

切换图标

默认情况下，我们的控件包含一个“加号”图标。

每次单击控件时，最好根据可折叠元素的状态在其图标为“加”或“减”之间切换。

为此，我们可以利用show.bs.collapse和hide.bs.collapse事件。

这是必需JavaScript代码，该代码可在<i>图标上切换类：

$("#accordion").on("hide.bs.collapse show.bs.collapse", e => {
  $(e.target)
    .prev()
    .find("i:last-child")
    .toggleClass("fa-minus fa-plus");
});

这是相应的演示：

设置默认状态

在我们的示例中，所有可折叠元素均从关闭开始。

但是，假设我们希望默认情况下打开第一个可折叠元素。 为此，我们必须向其中添加show类，然后在相关的button （控件）元素上删除collapsed类，并为可访问性设置aria-expanded="true" 。

这是我们所做的更改的手风琴：

多个可折叠元素打开

有时我们可能想同时打开多个可折叠元素。 我们可以通过从所有可折叠元素中删除data-parent属性来实现此目的。

这是具有这种行为的演示：

动画位置

考虑以下情形：假设可折叠元素内部有很多内容。 在某一时刻，您阅读了第二个元素内的文本，然后单击以查看第三个可折叠项目的内容。 第二个项目再次关闭，因此，现在，要查看第三个元素的开头，您必须向上滚动。 gh，不是很棒的用户体验。

看起来是这样的：

利用shown.bs.collapse事件的一个简单解决方法是将滚动动画触发到关联控件的顶部。

为此，我们将以下JavaScript代码添加到上一个演示中：

$("#accordion").on("shown.bs.collapse", e => {
  $("html, body").animate(
    {
      scrollTop: $(e.target)
        .prev()
        .offset().top
    },
    400
  );
});

现在让我们再次检查！

结论

在这个简短的教程中，我们使用了Bootstrap 4的折叠组件，构建了一些手风琴示例，涵盖了一些通用要求，并构建了一些解决方案。 您现在可以在即将到来的Bootstrap项目中应用今天获得的知识。

如果您曾经为Bootstrap手风琴构建了其他有用的扩展，请在下面的评论中告诉我们。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-customize-bootstraps-4-accordion-component--cms-32510

bootstrap手风琴