javascript - 如何在 CSS 中重新创建此切换？

Question

我正在尝试在 CSS/HTML 和 JavaScript 中重新创建此切换。关闭时，切换显示标题：“Stap 2 Implementatie in deorganisatie”和一个图标（带有加号的圆圈）。打开时，它会显示一些文本，在其下方有一个带有可下载工具的部分，它们可以实现为彼此相邻的图像，但如果将图标和文本分开，它可能会更通用。

我已经设法创建了标题，它下面的文本，我只需要帮助：

1. 关闭和打开切换的不同图标
2. 切换中的额外绿色部分
3. 如何在按钮上有 20px 的边框半径，但在单击/打开时只保留左上角和右上的边框半径。（见额外截图）

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.accordion {
  background-color: #7d206a;
  color: #fff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
  font-weight:600;
  font-family:'Dosis';
  border-top-left-radius:20px;
  border-top-right-radius:20px;
}
.icon {
float:right;
}

.header {
color:#45b072;
}
.active, .accordion:hover {
  background-color: #7d206a; 
}
p {
color:#fff;
font-family:'Dosis';
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: #7d206a;
  overflow: hidden;
  border-bottom-left-radius:20px;
  border-bottom-right-radius:20px;
}

<h2>Accordion</h2>

<button class="accordion"><span class="header">Stap 2</span> Implementatie in de organisatie<span class="icon">icon</span></button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

标签： javascripthtmljquerycss

Answer 1

这种观点可能有很多观点，但我认为你应该放弃panel.style.dipslay并使用类方法。所以它的要点是你向包装器添加一个开放状态类，并在此基础上做一些事情。我已经为你做了一些设置，所以accordion-container--is-open当手风琴打开时你可以使用这个类来处理你的 css

var accordions = document.querySelectorAll(".accordion-container");

accordions.forEach(element => {
  const toggler = element.querySelector('.accordion')
  toggler.addEventListener('click', function() {
    element.classList.toggle('accordion-container--is-open')
  })
})

.accordion {
  display: flex;
  align-items: center;
  background-color: #7d206a;
  color: #fff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
  font-weight: 600;
  font-family: 'Dosis';
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.icon {
  margin-left: auto;
}

.accordion-container--is-open .icon {
  color: aqua;
}

.header {
  color: #45b072;
}

.active,
.accordion:hover {
  background-color: #7d206a;
}

p {
  color: #fff;
  font-family: 'Dosis';
}

.panel {
  display: none;
  background-color: #7d206a;
  overflow: hidden;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.panel > * {
  padding: 0 18px;
}

.accordion-container--is-open .panel {
  display: block;
}

.accordion__footer {
  display: flex;
  align-items: center;
  height: 4rem;
  background-color: lime;
}

.accordion__footer-icon {
  width: 2rem;
  height: 2rem;
  background-color: aqua;
}

<h2>Accordion</h2>

<div class="accordion-container">
  <button class="accordion"><span class="header">Stap 2</span> Implementatie in de organisatie<span class="icon">icon</span></button>

  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    
  <div class="accordion__footer">
    <span class="accordion__footer-icon">1</span>
    <span class="accordion__footer-icon">2</span>
    <span class="accordion__footer-icon">3</span>
  </div>
  </div>
</div>