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

Question

我正在尝试使用this source中的代码向我的网站添加手风琴菜单。一切正常，除了表示菜单打开或关闭的+和 - 图标。 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。

工作示例：

＆＃13;

＆＃13;

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';
    } 
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;