我正在尝试为FAQ练习手风琴。我在小屏幕中的箭头图标出现问题，因此每次按下向下箭头时，都应切换向上箭头图标，也位于同一个地方。但是，一旦我点击向下箭头，向上箭头会在顶部显示更多（在智能手机视图上）。我尝试了保证金，但没有成功。我想知道如何通过点击它将每个图标从一个图标切换到另一个图标时将两个图标保持在同一个位置。
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
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%;
text-align: center;
border: none;
outline: none;
transition: 0.4s;
font-size: 18px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
}
button.accordion:after {
font-family: 'Arial Unicode MS', 'Consolas';
content: "\2304";
font-size: 60px !important;
color: #777;
float: left;
margin-left: 5px;
margin-top: -3vh ;
}
button.accordion.active:after {
content: "\2303";
max-height: 1vh;
}<div class="container">
<button type="button" class="accordion">First Question</button>
<div class="panel">
<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. </p>
</div>
<button type="button" class="accordion">Second Question</button>
<div class="panel">
<p>This is the answer to question #1. Pellentesque habitant morbi....</p>
</div>
<button type="button" class="accordion">Third Question</button>
<div class="panel">
<p>This is the answer to question #1. Pellentesque habitant morbi....</p>
</div>
<button type="button" class="accordion">Fourth Question</button>
<div class="panel">
<p>This is the answer to question #1. Pellentesque habitant morbi....</p>
</div>
<button type="button" class="accordion">Fifth Question</button>
<div class="panel">
<p>This is the answer to question #1. Pellentesque habitant morbi....</p>
</div>
<button type="button" class="accordion">Sixth Question</button>
<div class="panel">
<p>This is the answer to question #1. Pellentesque habitant morbi....</p>
</div>
</div>
答案 0 :(得分：1)
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
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%;
text-align: center;
border: none;
outline: none;
transition: 0.4s;
font-size: 18px;
position: relative;
}
.panel p{
margin: 0;
padding:10px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
}
button.accordion:after {
font-family: 'Arial Unicode MS', 'Consolas';
content: "\2304";
font-size: 60px !important;
color: #777;
position: absolute;
left: 3%;
top: -30%;
}
button.accordion.active:after {
content: "\2303";
max-height: 1vh;
}<div class="container">
<button type="button" class="accordion">First Question</button>
<div class="panel">
<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. </p>
</div>
<button type="button" class="accordion">Second Question</button>
<div class="panel">
<p>This is the answer to question #1. Pellentesque habitant morbi....</p>
</div>
<button type="button" class="accordion">Third Question</button>
<div class="panel">
<p>This is the answer to question #1. Pellentesque habitant morbi....</p>
</div>
<button type="button" class="accordion">Fourth Question</button>
<div class="panel">
<p>This is the answer to question #1. Pellentesque habitant morbi....</p>
</div>
<button type="button" class="accordion">Fifth Question</button>
<div class="panel">
<p>This is the answer to question #1. Pellentesque habitant morbi....</p>
</div>
<button type="button" class="accordion">Sixth Question</button>
<div class="panel">
<p>This is the answer to question #1. Pellentesque habitant morbi....</p>
</div>
</div>
答案 1 :(得分：0)
我会将箭头设置为背景图像，然后根据按钮的状态（活动与否）更改它，然后您可以根据需要定位图像。注意只有当它处于原始状态时才使用background-position。
.accordion{
background-image: url("down arrow"); //path to image
background-position: right center; //edit depending on your needs
}
.accordion.active{
background-image: url("up arrow"); //path to image
}
答案 2 :(得分：0)
嗨试试这个：它会起作用
button.accordion{
position:relative;
}
button.accordion::after{
position: absolute;
left: 30px;
top: -16px;
}