- ベストアンサー
jQuery tabs 開閉式タブについて
- jQueryを使用して開閉式のタブメニューを作成したい場合、slideToggleを使うと複数のメニューが同時に開いてしまう問題が起こることがあります。
- 解決策として、切り替えるメニュー以外のメニューを非表示にする方法があります。
- 具体的な実装方法として、ul.panel li:not(ul.tab li a.selectedのhref)を用いて非表示にした後、クリックしたメニューを表示するようにします。
- zamurai8
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
少し違うかも… こんなのでは？ （って、判じ物じゃあるまいし…） jQuery(function($){ var openP; $("ul.panel>li").hide(); $("ul.tab>li>a").click(function(){ var p = $(this).attr("href"); $(openP).slideUp(); if(openP === p) openP = null; else $(openP = p).slideDown(); return false; }); }); （全角空白は半角に）
その他の回答 (1)
- ok-rjak
- ベストアンサー率52% (70/134)
マスターではないですが・・・ こういうことではないんですかね？ <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文大変勉強になりました。 さらなる精進いたします。 本当に感謝感謝です。 重ねて御礼申し上げます。