アコーディオンに閉じるボタンを追加する

Question

アコーディオンの各パネルに閉じるボタンを追加しようとしています。これは私のスクリプトです。それは仕事をしません。どこが間違っていますか？どんな助けもありがとう！

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"); 
 
     $('#close').click(function() { 
 
      $("accordion").accordion({active: false}).click(); 
 
     } 
 
    } 
 
}

<div class="accord"> 
 

 
<button class="accordion"><b>one</b></button> 
 
<div class="panel"> 
 
something about one 
 

 
    <div id="close"><a href="#">Close</a></div> 
 
</div> 
 

 
<button class="accordion"><b>two</b></button> 
 
<div class="panel"> 
 
    something about two 
 
    
 
<div id="close"><a href="#">Close</a></div> 
 
</div> 
 

 
<button class="accordion"><b>three</b></button> 
 
<div class="panel"> 
 
something about three 
 

 
<div id="close"><a href="#">Close</a></div> 
 
</div> 
 

 
<button class="accordion"><b>four</b></button> 
 
<div id="foo" class="panel"> 
 
something about four 
 

 
<div id="close"><a href="#">Close</a></div> 
 
</div> 
 

 

 
</div>

アップデート：私は私のhtmlを追加しました。これがより簡単になることを望みます。前もって感謝します！

Answer 1

コードには多くの問題があります。まず、idはHTML全体で一意であると仮定しているため、クラスのdivのidを置き換えるようにidを変更する必要があります。<a>タグでクリックが行われるため、さらに良い方法ですこれらの要素にクラスを設定する必要があります。

<div><a href="#" class="close">Close</a></div> 

次の問題は、クリックイベントの処理方法です。あなたが使用しているライブラリは何も指定していませんが、一般的な説明をしようと思います。

//Select the close elements 
$(".close").click(function() { 

    var closeLink = $(this); 

    //The root of the widget 
    var widget = closeLink.closest(".accord"); 

    //This is the accordion you'll be closing 
    var closeAccordion = closeLink.closest(".accordion"); 

    //The other accordion element (every acordions execpt the closing one) 
    var otherAccordion = widget.children(".accordion").not(closeAccordion); 

    //From there you can implement you logic using the variable above 

}); 

あなたが見ることができるように、コードは完全ではないが、それはあなたがDOM要素を作成する方法と、jQueryを使ってそれらを処理する方法を理解するのに役立つ始める良いヘッドです。