如何在 CSS 中重新创建此切换? [英] How do I recreate this toggle in CSS?

查看：30
本文介绍了如何在 CSS 中重新创建此切换?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在 CSS/HTML 和 JavaScript 中重新创建此切换.关闭时，切换显示标题:Stap 2 Implementationatie in de Organisatie"和一个图标(带有加号的圆圈).打开时，它会显示一些文本，其下方是一个带有可下载工具的部分，它们可以作为彼此相邻的图像来实现，但如果将图标和文本分开，它可能会更通用.

我已经成功创建了标题及其下方的文本，我只需要以下方面的帮助:

  1. 关闭和打开切换的不同图标
  2. 切换中的额外绿色部分
  3. 如何在按钮上设置 20 像素的边框半径，但仅在单击/打开时保持左上和右上边框半径.(见额外截图)

var acc = document.getElementsByClassName("accordion");变量 i;for (i = 0; i < acc.length; i++) {acc[i].addEventListener("点击", function() {this.classList.toggle("active");var panel = this.nextElementSibling;if (panel.style.display === "block") {panel.style.display = "无";} 别的 {panel.style.display = "block";}});}

.accordion {背景颜色:#7d206a；颜色:#fff;光标:指针；填充:18px；宽度:100%；边界:无；文本对齐:左；大纲:无；字体大小:18px；过渡:0.4s；字体粗细:600；字体系列:'剂量'；边框左上角半径:20px；边框右上角半径:20px；}.图标 {浮动:右；}.header {颜色:#45b072；}.active, .accordion:hover {背景颜色:#7d206a；}p{颜色:#fff;字体系列:'剂量'；}.控制板 {填充:0 18px；显示:无；背景颜色:#7d206a；溢出:隐藏；边框左下角半径:20px；边框右下角半径:20px；}

<h2>Accordion</h2><button class="accordion"><span class="header">步骤 2</span>在组织中的实施<span class="icon">icon</span></button><div class="面板"><p>Lorem ipsum dolor sat amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation ullamco Laboris nisi ut aliquip ex ea commodo consequat.</p>

解决方案

你可以这样试试，我已经在评论中说明了变化.

var acc = document.getElementsByClassName("accordion");变量 i;for (i = 0; i < acc.length; i++) {acc[i].addEventListener("点击", function() {this.classList.toggle("active");var panel = this.nextElementSibling;if (panel.style.display === "block") {panel.style.display = "无";} 别的 {panel.style.display = "block";}});}

.accordion {背景颜色:#7d206a；颜色:#fff;光标:指针；填充:18px；宽度:100%；边界:无；文本对齐:左；大纲:无；字体大小:18px；过渡:0.4s；字体粗细:600；字体系列:'剂量'；边框半径:20px；/* 你可以在所有边上都有边界半径 */}.accordion.active {边框左下角半径:0px；/* 您可以将底部的边框半径设置为 0 */边框右下角半径:0px；}.图标 {浮动:对；高度:30px；/* 定义图标的高度和宽度 */宽度:30px；背景图片:url("https://i.stack.imgur.com/Vvuj2.png");/* 关闭面板的图像 */}.active .icon {/* 活动面板的图标 */背景图片:url("https://i.stack.imgur.com/ZAR5V.png");}.header {颜色:#45b072；}.积极的，.手风琴:悬停{背景颜色:#7d206a；}p{颜色:#fff;字体系列:'剂量'；}.控制板 {填充:0 18px；显示:无；背景颜色:#7d206a；溢出:隐藏；边框左下角半径:20px；边框右下角半径:20px；}.green-content {/* 新内容的属性 */显示:网格；网格模板列:重复(4，1fr)；/* 根据图像为您的内容提供四列 */背景:#45b072；边距:0 -18px；/* 负边距以便父填充不影响它 */边距顶部:10px；填充:18px；/* 与父级相同的填充 */白颜色;}

<h2>Accordion</h2><button class="accordion"><span class="header">步骤 2</span>在组织中的实施<span class="icon"></span></button><div class="面板"><p>Lorem ipsum dolor sat amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation ullamco Laboris nisi ut aliquip ex ea commodo consequat.</p><div class="green-content"><!-- 添加了额外内容--><div class="column-1">内容

<div class="column-2">内容

<div class="column-3">内容

<div class="column-4">内容

I'm trying to recreate this toggle in CSS/HTML and JavaScript. When closed the toggle shows the title: 'Stap 2 Implementatie in de organisatie' and an icon (circle with a plus in it). When open, it shows some text, and beneath it a section with downloadable tools, they could be implemented as images next to each other, but it's probably more versatile if it's the icon and text separated.

I've managed to create the title, the text underneath it, I just need help with:

  1. Different icon for closed and open toggle
  2. Extra green section in toggle
  3. How to have 20px border radius on button, but only keep the top left and right border radius when clicked/open. (see extra screenshot)

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>

解决方案

You can try it like this, I have explained the changes in comments.

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-radius: 20px; /* You can have border-radius on all sides */
}

.accordion.active {
  border-bottom-left-radius: 0px; /* You can set the border-radius of bottom part to 0 */
  border-bottom-right-radius: 0px;
}

.icon {
  float: right;
  height: 30px; /* Define height and width for the icon */
  width: 30px;
  background-image: url("https://i.stack.imgur.com/Vvuj2.png"); /* Image for the closed panel */
}

.active .icon {
  /* Icon for the active panel */
  background-image: url("https://i.stack.imgur.com/ZAR5V.png");
}

.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;
}

.green-content { /* Properties for the new content */
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Four columns for your content as per image */
  background: #45b072;
  margin: 0 -18px; /* Negative margin so that the parent padding doesn't affect it */
  margin-top: 10px;
  padding: 18px; /* Same padding as parent */
  color: white;
}

<h2>Accordion</h2>

<button class="accordion"><span class="header">Stap 2</span> Implementatie in de organisatie<span class="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="green-content">
    <!-- Extra content added -->
    <div class="column-1">
      Content
    </div>
    <div class="column-2">
      Content
    </div>
    <div class="column-3">
      Content
    </div>
    <div class="column-4">
      Content
    </div>
  </div>
</div>

这篇关于如何在 CSS 中重新创建此切换?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆