如何使用 CSS 和一点 JavaScript 构建 Accordion 组件

在今天的教程中，我们将学习如何使用 css 和一点 javascript 构建一个显示/隐藏组件。默认情况下，jquery 提供了slideToggle 允许我们通过滑动创建手风琴的方法。我们的挑战是用纯 JavaScript 模仿这个功能。

这是我们将要创建的组件：

See the Pen How to Build an Accordion Component With CSS and a Touch of JavaScript by Envato Tuts+ (@tutsplus) on CodePen.

注意<details>：这是由and元素本身提供的功能<summary>，尽管这些功能尚未在 Microsoft 浏览器中得到支持。

1. html

首先，我们定义一个元素，其类 container 包含两个子元素：

隐藏和显示内容的按钮（包括内联 svg 图标）
实际内容

看起来是这样的：

<div class="container">
  

  <button class="toggle-btn">
    <span class="more show">
      Show More info
      <svg width="24" height="24" viewBox="0 0 24 24">
        <path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/>
      </svg>
    </span>
    <span class="less hide">
      Show Less info
      <svg width="24" height="24" viewBox="0 0 24 24">
        <path d="M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z"/>
      </svg>
    </span>
  </button>

  <div class="info">
    
  </div>

  
</div>

2.CSS _

CSS 非常简单。我们需要定义两个辅助类（即hide和show）。

为了隐藏和显示目标元素，我们将使用该height属性，但我们不会在 CSS 中指定它的值。相反，我们将通过 javaScript 动态设置高度值。

需要注意的一点是，我们不使用该display属性来切换内容的可见性。该属性不属于可动画CSS 属性。

下面是对应的 CSS 样式：

.hide {
  display: none;
}

.show {
  display: flex;
}

.info {
  overflow: hidden;
  transition: height .5s;
}

3. JavaScript

现在是时候讨论我们的 JavaScript 代码应该如何工作了。

首先，一旦 dom 准备好，我们就获取.info元素的高度，然后立即将其值设置为 0。

const info = document.queryselector(".info");

let infoHeight = info.offsetHeight;
info.style.height = 0;

请记住，根据您的内容（例如，如果它包含图像），您可能必须将上面的代码包含在load事件中。

接下来，当 .toggle-btn 单击按钮时，我们执行以下操作：

.less切换和.more元素的可见性。
.info重新计算元素的高度。如果它是 0（最初我们给它这个值），这意味着内容是隐藏的，所以我们通过设置它的高度等于它的初始高度（存储在infoHeight变量中）来显示它。另一方面，如果内容可见，我们通过将其高度设置为 0 来隐藏它。
或者，我们确保.toggle-btn在幻灯片动画完成之前只单击一次（持续 500 毫秒）。

这是实现所有这些行为的代码：

const toggleBtn = document.querySelector(".toggle-btn");
const info = document.querySelector(".info");
const less = document.querySelector(".less");
const more = document.querySelector(".more");

// initial height
let infoHeight = info.offsetHeight;

toggleBtn.addeventListener("click", function() {
  this.disabled = true;

  more.classList.toggle("show");
  more.classList.toggle("hide");
  less.classList.toggle("show");
  less.classList.toggle("hide");

  const infoNewHeight = info.offsetHeight;
  if(infoNewHeight == 0) {
    info.style.height = `${infoHeight}px`;
  } else {
    info.style.height = 0;
  }

  setTimeout(() => {
    this.disabled = false;
  }, 500);
});

浏览器调整大小

下一步是确保在调整浏览器窗口大小时组件能够正常工作。

这是必要的JS代码：

// variable definitions here

window.addEventListener("resize", () => {
  info.style.removeProperty("height");
  infoHeight = info.offsetHeight;
  if(more.classList.contains("hide")) {
    info.style.height = `${infoHeight}px`;
  } else {
    info.style.height = 0;
  }
});