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

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: '[=11=]2B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    font-size:20px
 }
.active:after {
 content: "12";
}
}

<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 图标，有什么方法可以使用 image/SVG 实现相同的功能。

谢谢苏曼

Answer 1

为什么不尝试这样的事情呢？我希望这能达到目的，我确实理解你的问题。请提供有关如何放置 after 图标的更多信息。

我只添加了以下CSS。我 "removed" 现有的 float 因为我们要使图标居中。

更新：我把原来的解决方案留在这里。 OP 阐明了实际需要什么，所以我也采用@luze 提出的垂直对齐 + 和 - 按钮的弹性方法。

.mobile-toggle:after, .active::after {
    display: block;
    float: none;
    width: 100%;
    text-align: 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;
}
.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: '[=12=]2B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    font-size:20px;
    display: block;
    float: none;
    width: 100%;
    text-align: center;
 }
.active:after {
    content: "12";
    display: block;
    float: none;
    width: 100%;
    text-align: center;
}
}

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

Answer 2

使用 ::after 元素当然可以做到这一点。您可以使用 flexbox 轻松对齐内容，这对 ::before 和 ::after 元素也有影响。在您的情况下，您可以将以下 CSS 片段添加到您的 .mobile_toggle class 以对齐标题中间的图标。

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: '[=12=]2B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    font-size:20px
 }
.active:after {
 content: "12";
}
}

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

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

Display accordion icon in vertically middle position

javascript

accordion