css 手风琴_如何使用CSS和一点JavaScript构建手风琴组件

css 手风琴

在今天的教程中，我们将学习如何使用CSS和一些JavaScript构建显示/隐藏组件。 默认情况下，jQuery提供了slideToggle方法，该方法允许我们以滑动动作创建手风琴。 我们的挑战是使用纯JavaScript模仿此功能。

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

 

1. HTML

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

• 用于隐藏和显示内容的按钮（包括嵌入式SVG图标）
• 实际内容

看起来像这样：

<div class="container">
  <!-- other content here -->

  <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">
    <!-- content here -->
  </div>

  <!-- other content here -->
</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;
  }
});

4.浏览器支持

我们的演示应能在所有最新的浏览器和设备上正常运行。 同样，像往常一样，我们使用Babel将ES6代码编译为ES5。

结论

在这个简短的教程中，我们使用CSS和JavaScript构建了一个手风琴式的show / hide组件。 由于可以设置动画height属性，我们设法向组件中添加了滑入/滑出效果。

值得注意的是，我们还没有考虑可访问性，因此，如果您想增强其功能，无疑是下一步。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-build-an-accordion-style-showhide-component-with-css-and-a-touch-of-javascript--cms-30580

css 手风琴