时间戳

首页 > 解决方案 > 使用 + 和 - 号创建显示更多/显示更少的信息框

javascript - 使用 + 和 - 号创建显示更多/显示更少的信息框

问题描述

我想创建一个包含信息的框，该框在右上角单击“+”图标时展开。该框应展开并包含有关该特定部分的更多信息，并且“+”应转换为“-”以允许用户将框折叠为之前的原始格式。

动画将类似于 https://www.w3schools.com/howto/howto_css_menu_icon.asp

简单来说：我需要一个“显示更多/显示更少”的框，它可以展开/折叠，但带有“+”和“-”符号而不是“显示更多”或“显示更少”

我怎样才能做到这一点？

标签： javascripthtmlcssanimation

解决方案

这是JS的基础知识但是这里是修改W3代码的答案位

CSS

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2  {
  width: 15px;
  height: 3px;
  background-color: #333;  
  transition: 0.4s;
}

.bar1 {
  -webkit-transform: rotate(180deg) translate(0px, -3px);
  transform: rotate(180deg) translate(0px, -3px);
}

.bar2 {  
-webkit-transform: rotate(90deg) translate(0px, -0px);
  transform: rotate(90deg) translate(0px, 0px);
  }

  .change .bar1 {
  opacity: 0;
}

.change .bar2 {  
-webkit-transform: rotate(180deg) translate(0px, -0px);
  transform: rotate(180deg) translate(0px, 0px);
  }

.info{
display: none;
transition: 0.4s;

}
.change .info{
display: inherit;
transition: 0.4s;
}

HTML

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>

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

JS(写在body标签里面)

<script>
function myFunction(x) {
  x.classList.toggle("change");
}
</script>

推荐阅读