Question

我试图从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)';
    }
  }
}

Answer 1

我认为制作一个箭头图像会更容易。并使用jquery / js在箭头上添加/删除类，然后像transform: rotate(90deg);那样进行旋转transition: all 0.5s ease-in-out; /转换以使其旋转。

Answer 2

我明白了。我把图像放在主文件夹中，everythimg现在正常工作。

无法更改手风琴

2 个答案: