onclickのはdocument.getElementsByClassName

Question

で作業していない私は、私は同じクラス名を持つことによって、私のデータ入力をスピードアップするためにはJavaScript/CSS/HTMLを開発しようとしています、私はCMS に製品説明のために使用していアコーディオンメニューを持っています私のセクションとサブセクションをカプセル化します。私は別のウェブサイトでそれを見て、それはクールだと思ったが、私はそれを働かせることはできない。

例えば、このようなすべてのセクション：私は、特定のdivのid名を気にすることなく、コンテンツを切り取って貼り付けることができ

<button class="accordion_f">Section 1 Title</button> 
<div class="panel"> 
<button class="accordion_f">Section 1 Subsection Title</button> 
<div class="panel"> 
Section 1 contents</div> 
<button class="accordion_f">Section 2 Title</button> 
<div class="panel"> 
<button class="accordion_f">Section 2 Subsection Title</button> 
<div class="panel"> 
Section 2 contents</div> 
And so on... 

Section 1 
Section 1 contents 
Section 1 contents 
Section 2 
Section 2 contents 
Section 2 contents 
And so on 

この方法です。私は単独でそれをテストしたとき、私は錠剤のメニュー、例えば別のクラスにメニューをカプセル化した場合

CSS

<style> 
button.accordion_f { 
    background-color: #eee; 
    color: #444; 
    cursor: pointer; 
    padding: 14px; 
    width: 100%; 
    border: none; 
    text-align: left; 
    outline: none; 
    font-size: 15px; 
    transition: 0.4s; 
} 

button.accordion_f.active, button.accordion_f:hover { 
    background-color: #ddd; 
    color: blue; 
} 

button.accordion_f:after { 
    content: '\02795'; 
    font-size: 13px; 
    color: #777; 
    float: right;  
    margin-left: 5px; 
} 

button.accordion_f.active:after { 
    color: blue; 
    content: "\2796"; 
} 

div.panel { 
    padding: 0 14px; 
    background-color: white; 
    max-height: 0; 
    overflow: hidden; 
    transition: 0.3s ease-in-out; 
    opacity: 0; 
} 

div.panel.show { 
    opacity: 1; 
    max-height: 6000px; 
} 
</style> 

はJavaScript

<script> 
var acc = document.getElementsByClassName("accordion_f"); 
var i; 

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

は、それが正しく

働いていましたonclickは動作しません、それはメニューを展開しません、CSSは、 rk、バックグラウンドのシェーディングなど、要素を調べると、スクリプトが表示されません。親クラスはdocument.getElementsByClassNameに何らかの影響を与えますか？

acc[0].classList.toggle("active"); 
acc[0].nextElementSibling.classList.toggle("show"); 

これがそう働くonclickが動作しない理由を私は困惑しています：

<ul class="tabs"> 
<button class="accordion_f">Section 1</button> 
<div class="panel"> 
<p>Offers an easy way to connect your Polar training device with 3<sup>rd</sup> party services.</p> 
</div> 
</ul> 

にOnclick ...

を発射ない私は手動で私のメニューをテストするために、様々なインデックス番号を持つメニューのが拡大しています。

助けてください。

Answer 1

それが働いている、IEは互換モードにあったとIE8はdocument.getElementsByClassName