実現したいこと
テーブル内に含まれた各商品ごとのリンクをクリックすると、下の各商品ごとにわけられたアコーディオンメニューにスライドし、クリックした商品のアコーディオンメニューのみ開く
現状
スライドまではするが、メニューが開かない
jQueryのif文がまちがっているのだと思われますが、どこがまちがっているのかわからず困っています。
参考にしたサイトのURL
http://coolwebwindow.com/jquery-lab/archives/428
ソースコード
HTMLファイル
~ <table> <tr> <th> <img src=“XXXXXXX”> <a href=“#apple”>Apple</a> </th> </tr> <tr> <th> <img src=“XXXXXXX”> <a href=“#pen”>Pen</a> </th> </tr> </table> ~ <div class=“cost_design” id=“apple”> <span>Apple</span> <ul class=“inBox”> <li>XXXX</li> <li>XXXX</li> <li>XXXX</li> </ul> </div> <div class=“cost_design” id=“pen”> <span>Pen</span> <ul class=“inBox”> <li>XXXX</li> <li>XXXX</li> <li>XXXX</li> </ul> </div> ~~~ <script> $(function () { // #で始まるアンカーをクリックした場合の処理 $(‘.menu a[href^=#]’).on(‘click’, function() { // スクロール設定 var speed = 400; var href = $(this).attr(“href”); var target = $(href == “#” ? ‘html’ : href); var position = target.offset().top; $(‘html, body’).animate({scrollTop:position}, 300, ‘swing’); // ターゲット先のメニューが閉じていたら if($(href).children(‘.inBox’).css(‘display’) == ‘none’){ // 開閉イベントの実行 $(href).children(‘span’).trigger(‘click’); } return false; }); // 開閉のためのクリック処理 $(‘span’).click(function() { // メニューの表示・非表示 $(this).toggleClass(“clicked”); $(this).next(‘ul’).slideToggle(‘fast’); }); }); </script>
CSSファイル
.inBox { display: none; list-style: none; }
回答1件
あなたの回答
tips
プレビュー