jQueryを使ったアコーディオンメニューを作成したい
jQueryを使ったアコーディオンメニューを作成したいと思い、以下のコードまでは書きました。
PCの時には常時表示し、SPの時にアコーディオンメニューで開くようにしたいです。
2つ以上のアコーディオンメニューを作成し、開く白いボックスをクリックすると全てのメニューが開いてしまいます。
クリックされたメニューのみを開くようにしたいです。
1つづつクリックしていけば、全部が開いた状態で見えるというのが理想です。
※画像はのせてないので、ある程でお願いします…
PCとSPでそれぞれ画像を貼り付けているのも、個人的には気になっていますが
場所がずれてしまうため、今の方法になっています。
どなたかお詳しい方、よろしくお願い致します。
該当のソースコード
html
1 2`これを複数作成して、それぞれクリックして動くようにしたいです` 3 4<div class="table table__text"> 5 <div class="accordion"> 6 ここを開く 7 </div> 8 <a class="menu__item__link js-menu__item__link"></a> 9 10 <img class="table__img menu delate" src="/assets/img/items/table__item.png" alt="厚み/サイズ"> 11 <table class="table__items menu"> 12 <tr class="line"> 13 <td><img class="table__img menu" src="/assets/img/items/table__item.png" alt="厚み/サイズ"></td> 14 <th>ダミー</th> 15 <th></th> 16 <th></th> 17 <th></th> 18 <th></th> 19 <th></th> 20 </tr> 21 <tr class="row"> 22 <th></th> 23 <td></td> 24 <td></td> 25 <td></td> 26 <td></td> 27 <td></td> 28 <td></td> 29 </tr> 30 <tr class="row"> 31 <th></th> 32 <td></td> 33 <td></td> 34 <td></td> 35 <td></td> 36 <td></td> 37 <td></td> 38 </tr> 39 <tr class="row"> 40 <th></th> 41 <td></td> 42 <td></td> 43 <td></td> 44 <td></td> 45 <td></td> 46 <td></td> 47 </tr> 48 <tr class="row"> 49 <th></th> 50 <td></td> 51 <td></td> 52 <td></td> 53 <td></td> 54 <td></td> 55 <td></td> 56 </tr> 57 </table> 58</div>
css
1.table { 2 position: relative; 3} 4.accordion { 5 display: none; 6} 7.table__text a.menu__item__link { 8 display: none; 9} 10.table img { 11 position: absolute; 12 top: 9px; 13 left: 10px; 14 height: 50px; 15} 16.table table.menu { 17 text-align: center; 18 background-color: #f7f7f7; 19 display: block; 20 padding: 50px 35px 35px 35px; 21 width: -webkit-fit-content; 22 width: -moz-fit-content; 23 width: fit-content; 24} 25table.menu tr.row th { 26 border: 1px solid; 27 border-left: 0; 28 border-bottom: 0; 29 min-width: 4.1vw; 30 font-weight: lighter; 31} 32table.menu tr.row td { 33 border: 1px solid; 34 border-bottom: 0; 35 border-right: 0; 36 padding: 2.5% 6%; 37 background-color: #fff; 38} 39table.menu tr.line th { 40 border: 1px solid; 41 border-top: 0; 42 border-right: 0; 43 font-weight: lighter; 44 min-width: 6.1vw; 45 padding: 0 0.5vw; 46} 47@media screen and (min-width: 1200px) { 48 .table table.menu tr.row th { 49 min-width: 50px; 50 } 51 table.menu tr.line th { 52 min-width: 74px; 53 } 54} 55@media screen and (max-width: 767px) { 56 .accordion { 57 display: block; 58 background: #f7f7f7; 59 padding: 1rem; 60 text-align: center; 61 } 62 a.menu__item__link { 63 display: block; 64 padding: 2rem; 65 border: 1px solid #000109; 66 width: 100%; 67 height: 0; 68 position: relative; 69 } 70 .table img { 71 position: unset; 72 } 73 .table img.delate { 74 display: none; 75 } 76 .table table.menu { 77 width: 100%; 78 display: none; 79 } 80}
jQuery
1$(document).ready(function(){ 2 $(".js-menu__item__link").click(function(){ 3 $(".menu").next().slideToggle(300); 4 }); 5});
試したこと
クリックしたときに、追加でクラスを指定してという書き方も試しましたが
自分ではうまく行きませんでした。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。