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

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>

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

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

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

谢谢苏曼

Answer 1

为什么不尝试这样的事情？我希望这可以达到目的，并且我确实理解您的要求。请提供有关如何放置after图标的更多信息。

我只更改了：

    .active:after {
        content: "\2212";
        position: absolute;
        left: 50%;
    }

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";
    position: absolute;
    left: 50%;
}
}

<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>