在中创建和使用 CSS 表单<Style>, not in <Body> with HTML

Question

I just have learnt HTML recently and have a small program.最近刚学了HTML，有一个小程序。

 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function(){ this.classList.toggle("active"); this.nextElementSibling.classList.toggle("show"); } }

 .triangleright { width: 0; height: 0; border: solid 10px; border-color: transparent transparent transparent green ; } .triangledown { width: 0; height: 0; border: solid 10px; border-color: white transparent transparent transparent ; } button.accordion { background-color: rgb(213,227,233); color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } button.accordion.active { background-color: rgb(0,56,96); color: white; } button.accordion:after { /* content:"/2795"; */ content: "<div class="triangleright"></div>"; font-size: 13px; float:left; margin-left: 5px; } button.accordion.active:after { /* content:"/2796"; */ content: "<div class="triangledown"></div>"; } div.panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: 0.6s ease-in-out; opacity: 0; } div.panel.show { opacity: 1; max-height: 500px; }

 <button class="accordion">&nbsp; &nbsp; Title</button> <div class="panel"> <p>Content</p> </div>

I need to create a small triange before "Title".我需要在“标题”之前创建一个小三角。 But when I insert the triangle form which i have created into button.accordion:after and button.accordion.active:after , that does not work.但是当我将我创建的三角形插入button.accordion:after和button.accordion.active:after ，这不起作用。

Answer 1

You can't create html elements in content property of CSS, more info你不能在 CSS 的 content 属性中创建 html 元素，更多信息

Alternatively you can have another approach, you can put that button in a div, and in the div you can have an absolute position element which shows arrow, and you can handle that div same as you have handle nextElementSibling...或者你可以有另一种方法，你可以把那个按钮放在一个 div 中，在 div 中你可以有一个显示箭头的绝对位置元素，你可以像处理 nextElementSibling 一样处理那个 div...

Here is a fiddle which solves your issue这是一个解决您问题的小提琴

HTML: HTML：

<div class="parent">
  <div class="arrow triangleright"></div>
  <button class="accordion">&nbsp; &nbsp; Title</button>
  <div class="panel">
    <p>Content</p>
  </div>
</div>

JAVASCRIPT:爪哇脚本：

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

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    onAccClick(this);
  }
}

for (i = 0; i < accdiv.length; i++) {
  accdiv[i].onclick = function() {
    onAccClick(this.nextElementSibling);
  }
}

function onAccClick(elem) {
    elem.classList.toggle("active");
  elem.nextElementSibling.classList.toggle("show");
  elem.previousElementSibling.classList.toggle("triangledown");
}

CSS: CSS：

.triangleright {
  width: 0;
  height: 0;
  border: solid 10px;
  border-color: transparent transparent transparent green;
}

.triangledown {
  top: 22px !important;
  right: 13px !important;
  width: 0;
  height: 0;
  border: solid 10px;
  border-color: white transparent transparent transparent;
}
div.arrow {
  cursor: pointer;
}
button.accordion {
  background-color: rgb(213, 227, 233);
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

button.accordion.active {
  background-color: rgb(0, 56, 96);
  color: white;
}

.parent {
  position: relative
}

div.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: 0.6s ease-in-out;
  opacity: 0;
}

.arrow {
  position: absolute;
  top: 16px;
  right: 10px;
}

div.panel.show {
  opacity: 1;
  max-height: 500px;
}

在中创建和使用 CSS 表单<Style>, not in <Body> with HTML

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-05-28 13:58:30

在中创建和使用 CSS 表单<Style>, not in <Body> with HTML

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-05-28 13:58:30

解决方案1
1 已采纳 2016-05-28 13:58:30