2016-11-23 48 views
-1

我試圖從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)'; 
    } 
    } 
} 
+1

什麼是手風琴定義爲?關聯的HTML在哪裏? – plumwd

+0

手風琴是由打開div的按鈕組成的。該HTML位於包含我上面提到的4個文件夾的主文件夾中。 –

+0

向我們展示手風琴宣言和HTML。 – plumwd

回答

0

我認爲這將是更容易只是讓一個箭頭圖像。並使用jquery/js在箭頭上添加/刪除類,併爲其旋轉transform: rotate(90deg); /轉換像transition: all 0.5s ease-in-out;

0

我想通了。我把圖像放在主文件夾中,並且everythimg現在正在適當工作。