ID非公開

2022/5/25 9:37

22回答

<div class=“test”>テスト1</div>

JavaScript | HTML、CSS44閲覧

ベストアンサー

0
ID非公開

質問者2022/5/25 14:01

ご回答ありがとうございます。 動いてくれました! 全てのテストに同一のクラスを付与してそこから要素を取得してそれぞれaddEventListenerしてみました。 あとは回答者様のようにテストと説明に個別のidを付与してテストクラスの数字のみ残しidの番号に置き換えて条件分岐でhiddenクラスのaddとremoveで動いてくれたっぽいです!

その他の回答(1件)

0

ID非公開さん >・・・・テスト1をクリックすると下の説明1が出てくるように・・・・・ ご参考に↓ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <style> .test { height: 50px; line-height: 50px; text-align: center; background-color: #6b90ff; border-bottom: 1px solid #fff; cursor: pointer; transition: .3s; } .setsumei { padding: 0.5em 1em; background-color: #d3deff; } </style> </head> <body> <div id="acMenu"> <div class="test">テスト1</div> <div class="setsumei">説明1</div> <div class="test">テスト2</div> <div class="setsumei">説明2</div> <div class="test">テスト3</div> <div class="setsumei">説明3</div> <div class="test">テスト4</div> <div class="setsumei">説明4</div> </div> <script> $(function(){ $('.setsumei').css('display', 'none'); $("#acMenu div").on("click", function() { $(this).next().slideToggle(); }); }); </script> </body> </html>