2016-11-30 12 views
0

私は基本的にすべてのアコーディオンを閉じて、そのうちの1つをクリックしたままにしておきます。Javascript:クリックするとすべてのアコーディオンを閉じますか?

したがって、短期間では、1つのタブを開いたままにしてください。

これは私がこれまで持っているものです。

https://jsfiddle.net/gymzfg9r/2/

、これはjavascriptのです:

var acc = document.getElementsByClassName("accordion"); 
var i; 

for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = function(){ 
     this.classList.toggle("active"); 
     this.nextElementSibling.classList.toggle("show"); 
    } 
} 

誰かがこの上でアドバイスしていただけますか?

答えて

1

近い他の人のための挿入コード:

this.classList.toggle("active"); 

    var arr = document.getElementsByClassName("show"); 
    for (j = 0; j < arr.length; j++) { 
     if(this.nextElementSibling != arr[j]) 
     arr[j].classList.toggle("show"); 
    } 


    this.nextElementSibling.classList.toggle("show"); 
1

この仕事をするが、私は、これはそれを行うには恐ろしい方法ですかなり確信している、ちょうど今

var acc = document.getElementsByClassName("accordion"); 
var i;  

function closeEverything() { 
    var openElements = document.getElementsByClassName("active"); 
    if(openElements.length) { 
    for(var i = 0; i < openElements.length; i++) { 
     openElements[i].nextElementSibling.classList.toggle("show"); 
     openElements[i].classList.toggle("active"); 
    } 
    } 
} 

for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = function(){ 
      if(this.classList.contains('active')) { 
      this.classList.toggle('active'); 
      this.nextElementSibling.classList.toggle('show'); 
     } else { 
       closeEverything(); 
      this.classList.toggle("active"); 
      this.nextElementSibling.classList.toggle("show"); 
     } 
    } 
} 
をより良いものを思い出すカント
関連する問題