Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/384.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Can'；不要在手风琴上换箭头_Javascript_Css - Fatal编程技术网
Fatal编程技术网
  • javascript/
  • Javascript Can'；不要在手风琴上换箭头

Javascript Can'；不要在手风琴上换箭头

javascript css

Javascript Can'；不要在手风琴上换箭头,javascript,css,Javascript,Css,我试图复制W3C的手风琴。我的项目分布在4个文件夹中：CSS、字体、图像和脚本。问题是JS不想切换背景图像。这是我的密码 CSS JS for（i=0；i

我试图复制W3C的手风琴。我的项目分布在4个文件夹中：CSS、字体、图像和脚本。问题是JS不想切换背景图像。这是我的密码

CSS

JS

for（i=0；i
我认为只制作一个箭头图像会更容易。使用jquery/js在箭头上添加/删除类，并进行旋转
变换：旋转（90度）/类似于
转换的转换：所有0.5s轻松输入输出以使其旋转
 我明白了。我把图像放在主文件夹中，现在一切正常。
什么是手风琴？关联的HTML在哪里？手风琴由打开div的按钮组成。HTML位于主文件夹中，其中包含我上面提到的4个文件夹。向我们展示手风琴声明和HTML。

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



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