質問: ### 前提・実現したいこと Jqueryの、アコーディオンメニューを作ったのですが、 最初のメニューは動くのですが、 2番目、3番目のメニューを動くようにしたい。 ### 発生している問題・エラーメッセージ 2番目以降のアコーディオンメニューが動かない。 ### 該当のソースコード https://codepen.io/QAtool/pen/qwvqzN (上記の、『さらに詳しく!02』『さらに詳しく!03』が開閉するように動作させたいと考えております。) ``` ソースコード // JavaScript Document document.querySelector('button.kaihei') .addEventListener('click', function() { document.querySelector('ul.kaihei').classList.toggle('is-open'); }); ``` ### 試したこと 連番で、.kaiheiなどのクラス名を指定すれば良いのか?など、 解決方法について調べたが分からなかったです。 ### 補足情報(FW/ツールのバージョンなど) https://codepen.io/QAtool/pen/qwvqzN (上記の、『さらに詳しく!02』『さらに詳しく!03』が開閉するように動作させたいと考えております。) お詳しい方、何卒どうぞよろしくお願い致します。
回答: `document.querySelector('button.kaihei')` とした場合、 `'button.kaihei'` にヒットする1つ目の要素しか取得できないので、現状の動きになっています。 JavaScriptのコードの修正だけでもなんとかなるといえばなんとかなるのですが、かなりトリッキーな書き方になるので、HTMLも書き換えたほうがいいと思います。 下記のような感じでどうでしょうか ``` さらに詳しく!01 さらに詳しく!01さらに詳しく!01さらに詳しく!01さらに詳しく!01さらに詳しく!01 さらに詳しく!01さらに詳しく!01さらに詳しく!01さらに詳しく!01さらに詳しく!01 ポイント!: さらに詳しく!02 さらに詳しく!02さらに詳しく!02さらに詳しく!02さらに詳しく!02さらに詳しく!02 さらに詳しく!02さらに詳しく!02さらに詳しく!02さらに詳しく!02さらに詳しく!02 ポイント!: さらに詳しく!03 さらに詳しく!03さらに詳しく!03さらに詳しく!03さらに詳しく!03さらに詳しく!03 さらに詳しく!03さらに詳しく!03さらに詳しく!03さらに詳しく!03さらに詳しく!03 ポイント!: ``` ``` Array.prototype.forEach.call(document.querySelectorAll('.accordions'), div => { div.querySelector('button.kaihei').addEventListener('click', evt => { div.querySelector('ul.kaihei').classList.toggle('is-open'); }); }); ``` あと、細かいですが、ご提示のコードを見る限りjQueryは使われていないようなので、質問のタグとしてはJavaScript (とHTML) だけでいいかなと思います