- ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：jQuery tabs 開閉式タブについて）
jQuery tabs 開閉式タブについて
このQ&Aのポイント
- jQueryを使用して開閉式のタブメニューを作成したい場合、slideToggleを使うと複数のメニューが同時に開いてしまう問題が起こることがあります。
- 解決策として、切り替えるメニュー以外のメニューを非表示にする方法があります。
- 具体的な実装方法として、ul.panel li:not(ul.tab li a.selectedのhref)を用いて非表示にした後、クリックしたメニューを表示するようにします。
- zamurai8
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- ok-rjak
- ベストアンサー率52% (70/134)
回答No.1
マスターではないですが・・・ こういうことではないんですかね？ <ul class="tab"> <li><a href="#tabs-1">メニュー１</a></li> <li><a href="#tabs-2">メニュー２</a></li> <li><a href="#tabs-3">メニュー３</a></li> </ul> <ul class="panel"> <li id="tabs-1">aaa</li> <li id="tabs-2">bbb</li> <li id="tabs-3">ccc</li> </ul> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> ;(function($){ $('.panel li').hide(); $('.tab li a').click(function(){ $('.panel li').slideUp(); $($(this).attr('href')).slideDown(); return false; }); })(jQuery); </script>
質問者
お礼
早速のご教授誠にありがとうございます。 私のやり方がまずいのかやはり閉じる方がうまくいかず。。 コード自体は自ら複雑にしてしまっていることは気づきました。 キレイなコード勉強になりました。
お礼
ご教授誠にありがとうございます。 ザックリうまくいきました！！！ if文大変勉強になりました。 さらなる精進いたします。 本当に感謝感謝です。 重ねて御礼申し上げます。