我試圖從W3C複製手風琴。我的項目分佈在4個文件夾中:CSS,FONTS,IMAGES和SCRIPT。問題是JS不想切換背景圖像。這是我的代碼。無法更改手風琴上的箭頭
CSS
.accordion {
width: 100%;
height: 34px;
border-style: none;
border-bottom: 1px solid #515151;
background-color: #000;
color: #fff;
text-align: left;
padding: 10px;
font-family: Tahoma;
font-size: 12px;
background-image: url(../IMAGES/arrow-right.png);
background-repeat: no-repeat;
background-position: 330px 15px;
transition: 0.4s;
cursor: pointer;
}
JS
for (i = 0; i < accordion.length; i++) {
accordion[i].onclick = function() {
this.nextElementSibling.classList.toggle('show');
if (this.textContent === 'Click to open') {
this.textContent = 'Click to close';
} else {
this.textContent = 'Click to open';
}
if (this.style.backgroundImage === 'url(../IMAGES/arrow-right.png)') {
this.style.backgroundImage = 'url(../IMAGES/arrow-down.png)';
} else {
this.style.backgroundImage = 'url(../IMAGES/arrow-right.png)';
}
}
}
什麼是手風琴定義爲?關聯的HTML在哪裏? – plumwd
手風琴是由打開div的按鈕組成的。該HTML位於包含我上面提到的4個文件夾的主文件夾中。 –
向我們展示手風琴宣言和HTML。 – plumwd