javascript - 在垂直中间位置显示 Accordion 图标

Question

var acc = document.getElementsByClassName("mobile_toggle");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var toggle_content = this.nextElementSibling;
    if (toggle_content.style.maxHeight) {
      toggle_content.style.maxHeight = null;
    } else {
      toggle_content.style.maxHeight = toggle_content.scrollHeight + "px";
    } 
  });
}

@media only screen and (max-width: 767px) {
.mobile_toggle {
    padding: 5px !important;
    cursor: pointer;
	font-size: 15px;
	transition: 0.5s;
}
.toggle_content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.mobile_toggle:active i {
	-ms-transform: rotate(50deg); /* IE 9 */
    transform: rotate(50deg);
}
.active, .mobile_toggle:hover {
 	 background-color: #ccc;
}
.mobile_toggle:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    font-size:20px
 }
.active:after {
	content: "\2212";
}
}

<div class="mobile_toggle">
<span>Our hardcover books are library bound with exposed reinforced endsheets, which means extra lasting power Will your books and materials with?  </span>
</div>
  <div class="toggle_content">
    <p>Our hardcover books are library bound with exposed reinforced endsheets, which means extra lasting power, use after use. They are side sewn or section sewn, and all covers are laminated with glossy film. The books are vibrant, durable, and unconditionally guaranteed. </p>
  </div>

我仅为移动访问者创建了这个 Accordion 。如果我使用长标题，我无法更改后图标位置。

我想在 Accordion 标题中间显示图标!

如果无法使用 after 图标，是否有任何方法可以使用图像/SVG 来实现相同的功能。

谢谢 苏曼

Answer 1

当然可以使用 ::after 元素来做到这一点。您可以使用flexbox为了轻松对齐内容，这也会对 ::before 和 ::after 元素产生影响。根据您的情况，您可以将以下 CSS 代码段添加到 .mobile_toggle 类中，以将图标对齐在标题中间。

display: flex;
align-items: center;

我还编辑了您的代码片段以查看完整的更改。

var acc = document.getElementsByClassName("mobile_toggle");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var toggle_content = this.nextElementSibling;
    if (toggle_content.style.maxHeight) {
      toggle_content.style.maxHeight = null;
    } else {
      toggle_content.style.maxHeight = toggle_content.scrollHeight + "px";
    } 
  });
}

@media only screen and (max-width: 767px) {
.mobile_toggle {
    padding: 5px !important;
    cursor: pointer;
	font-size: 15px;
	transition: 0.5s;
  
  display: flex;
  align-items: center;
}
.toggle_content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.mobile_toggle:active i {
	-ms-transform: rotate(50deg); /* IE 9 */
    transform: rotate(50deg);
}
.active, .mobile_toggle:hover {
 	 background-color: #ccc;
}
.mobile_toggle:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    font-size:20px
 }
.active:after {
	content: "\2212";
}
}

<div class="mobile_toggle">
<span>Our hardcover books are library bound with exposed reinforced endsheets, which means extra lasting power Will your books and materials with?  </span>
</div>
  <div class="toggle_content">
    <p>Our hardcover books are library bound with exposed reinforced endsheets, which means extra lasting power, use after use. They are side sewn or section sewn, and all covers are laminated with glossy film. The books are vibrant, durable, and unconditionally guaranteed. </p>
  </div>