时间戳

首页 > 解决方案 > 在垂直中间位置显示手风琴图标

javascript - 在垂直中间位置显示手风琴图标

问题描述

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>

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

我想在手风琴标题中间显示图标！

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

谢谢苏曼

标签： javascriptaccordion

解决方案

使用您的::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>

推荐阅读