javascript - 网站上的 Accordion 菜单之前和之后的图标

Question

我正在尝试使用 this source 中的代码向我的网站添加 Accordion 菜单。一切正常，除了表示菜单打开或关闭的 + 和 - 图标。 On my site, the icons appear below the words.

如何让图标显示在单词左侧居中，就像在原始源代码中那样？

编辑 抱歉，我认为源代码的链接已经足够了，因为我刚刚将其复制并粘贴到我的网站上。

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

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
  	  panel.style.maxHeight = null;
    } else {
  	  panel.style.maxHeight = panel.scrollHeight + 'px';
    } 
  }
}

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
}

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

<h1 class="subsection_title"> Baby Sleeping Tips By Timeframe</h1>
<p>
Here are suggestions that most parents agree are worth trying during each phase:
</p>
<button class="accordion"><b>From 0 To 2 Months</b><br><p class="small"> Babies sleep regularly and often for the first couple of weeks. Put them down to sleep when you start to see the first signs of drowsiness (like drooping eyelids or some fussiness).
</p></button>

Answer 1

您可以添加

position: relative;
overflow: hidden; 

到 button.accordion 和

position: absolute;
right: 5px;
top: 0;
bottom: 0;
transform: translateY(50%);

到button.accordion:after。

工作示例:

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

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
  	  panel.style.maxHeight = null;
    } else {
  	  panel.style.maxHeight = panel.scrollHeight + 'px';
    } 
  }
}

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    position: relative;
    overflow: hidden;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    transform: translateY(50%);
}

button.accordion.active:after {
    content: "\2212";
}

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

<h1 class="subsection_title"> Baby Sleeping Tips By Timeframe</h1>
<p>
Here are suggestions that most parents agree are worth trying during each phase:
</p>
<button class="accordion"><b>From 0 To 2 Months</b><br><p class="small"> Babies sleep regularly and often for the first couple of weeks. Put them down to sleep when you start to see the first signs of drowsiness (like drooping eyelids or some fussiness).
</p></button>