Javascript 加/减手风琴列表

我有下面的手风琴列表代码。打开和关闭列表时，如何在标题的左角获得加号和减号，而不改变文本的位置？任何有帮助的，干杯

（函数（）{
var手风琴，i；
//确保浏览器支持我们将要执行的操作。
如果（！document.querySelectorAll | |！document.body.classList）返回；
//使用函数有助于将每个手风琴与其他手风琴分离
功能制作手风琴（手风琴）{
var目标，currentTarget，i；
目标=accordion.querySelectorAll（'.accordion>*>h1'）；
对于（i=0；i

/*所有段落*/
p{
保证金：5px；
颜色：#007a5e；
}
.bold{
颜色：#007a5e；
字体大小：粗体；
}
伯德怀特先生{
字体大小：粗体；
}
/*手风琴乐章*/
.accordion.js>*{
溢出：隐藏；
}
.accordion.js>*：非（.expanded）>*：非（h1）{
最大高度：0；
边际上限：0；
页边距底部：0；
不透明度：0；
可见性：隐藏；
溢出：隐藏；
}
.accordion.js>.expanded>*：非（h1）{
不透明度：1；
能见度：可见；
}
.accordion.js>*>h1{
光标：指针；
能见度：可见；
}
.accordion.js>*>*：非（h1）{
过渡：最大高度0.5s，可见性0.5s，边距0.5s，不透明度0.5s；
}
/*截面特性*/
.部分{
字体系列：Verdana；
字体重量：较轻；
颜色：#5e5e；
文本对齐：居中；
边框样式：实心；
边框宽度：1px；
边框颜色：#dddddd；
填充物：5px；
背景色：#fcfc；
边界半径：1px；
}
.部分：悬停{
长方体阴影：0.5pxRGBA（0,0,0,0.1）；
-moz盒阴影：0 10px rgba（0,0,0,0.1）；
-webkit盒阴影：0 10px rgba（0,0,0,0.1）；
-o盒阴影：0 10px rgba（0,0,0,0.1）；
}
/*绿色部分属性*/
.第2节{
字体系列：Verdana；
字体重量：较轻；
颜色：#5e5e；
文本对齐：居中；
边框样式：实心；
边框宽度：1px；
边框颜色：#ccd6e0；
填充物：5px；
背景色：rgba（224235,245,0.3）；
边界半径：1px；
}
.第2节：悬停{
长方体阴影：0.5pxRGBA（0,0,0,0.1）；
-moz盒阴影：0 10px rgba（0,0,0,0.1）；
-webkit盒阴影：0 10px rgba（0,0,0,0.1）；
-o盒阴影：0 10px rgba（0,0,0,0.1）；
}
.手风琴>部分>分区{
边缘底部：15px；
}

1.


一个


2.


两个

您必须将

添加到每个

h1

，并包括css，我在下面添加了css。注意，不需要额外的javascript

附加CSS 修改的代码段

（函数（）{
var手风琴，i；
//确保浏览器支持我们将要执行的操作。
如果（！document.querySelectorAll | |！document.body.classList）返回；
//使用函数有助于将每个手风琴与其他手风琴分离
功能制作手风琴（手风琴）{
var目标，currentTarget，i；
目标=accordion.querySelectorAll（'.accordion>*>h1'）；
对于（i=0；i
/*所有段落*/
p{
保证金：5px；
颜色：#007a5e；
}
.bold{
颜色：#007a5e；
字体大小：粗体；
}
伯德怀特先生{
字体大小：粗体；
}
/*手风琴乐章*/
.手风琴h1{
宽度：100%；
}
.accordion.js.chevrone{
位置：绝对位置；
左：30px；
}
.accordion.js>*：未（.expanded）.雪佛龙：之前{
内容：“+”；
}
.accordion.js>.expanded.chevrone:之前{
内容:'一';；
}
.accordion.js>*{
溢出：隐藏；
}
.accordion.js>*：非（.expanded）>*：非（h1）{
最大高度：0；
边际上限：0；
页边距底部：0；
不透明度：0；
可见性：隐藏；
溢出：隐藏；
}
.accordion.js>.expanded>*：非（h1）{
不透明度：1；
能见度：可见；
}
.accordion.js>*>h1{
光标：指针；
能见度：可见；
}
.accordion.js>*>*：非（h1）{
过渡：最大高度0.5s，可见性0.5s，边距0.5s，不透明度0.5s；
}
/*截面特性*/
.部分{
字体系列：Verdana；
字体重量：较轻；
颜色：#5e5e；
文本对齐：居中；
边框样式：实心；
边框宽度：1px；
边框颜色：#dddddd；
填充物：5px；
背景色：#fcfc；
边界半径：1px；
}
.部分：悬停{
长方体阴影：0 0 5px rgba（0,0,0，
.accordion.js .chevrone {
    position: absolute;
    left: 30px;
}

.accordion.js > *:not(.expanded) .chevrone:before {
    content: '+';
}

.accordion.js >.expanded .chevrone:before {
    content: '-';
}