jQuery tabs 開閉式タブについて

解決済

質問者：zamurai8
質問日時：2013/12/25 09:45
回答数：2件

jQuery tabsについて質問させてください。

知識不足です。。

やりたいこととしましては、複数タブメニューの開閉です。
メニュー１　クリックで⇒開く　⇒再度クリックで閉じる
メニュー１開放時⇒メニュー２　クリック⇒メニュー２の内容に切り替わる⇒メニュー２再度クリックで閉じるといった内容です。

開閉だけなら　collapsible: true　で解決ですが、slideToggle　のような効果も付けたい。
単一のメニューの場合は　slideToggle　で一発ですが、複数になったらうまくいかない????
メニューの内容が同時に開いたりしてしまい。。などなど試行錯誤で行き詰まりました。

色々参考にして最終的には以下のようなところにきましたが、メニューを閉じる事ができず
どなたかjQueryマスターの方ご教授いただけますと幸いです。

説明下手ですいません。
何卒よろしくお願いいたします。
※以下のスクリプトにこだわりはございません。
こんなの一発でこうだろという指摘ございましたら遠慮くなく指摘してくださいませ。

javascript ================
<script type="text/javascript">
$(function(){
$("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide()
$("ul.tab li a").click(function(){
$("ul.tab li a").removeClass("selected")
$(this).addClass("selected")
$("ul.panel li").slideUp("fast")
$($(this).attr("href")).slideDown("fast")
return false
});
})
</script>

///////HTML//////
<body>
<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"></li>
<li id="tabs-2"></li>
<li id="tabs-3"></li>
</ul>
</body>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2013/12/25 17:59

少し違うかも…

こんなのでは？　（って、判じ物じゃあるまいし…）

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;
　　});
});

（全角空白は半角に）

- 0
- 件

通報する

この回答へのお礼

ご教授誠にありがとうございます。

ザックリうまくいきました！！！

if文大変勉強になりました。
さらなる精進いたします。

本当に感謝感謝です。
重ねて御礼申し上げます。

通報する

お礼日時：2013/12/25 19:23

No.1

回答者： ok-rjak
回答日時：2013/12/25 10:03

マスターではないですが・・・

こういうことではないんですかね？

<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"></s …
<script>
;(function($){
$('.panel li').hide();
$('.tab li a').click(function(){
$('.panel li').slideUp();
$($(this).attr('href')).slideDown();
return false;
});
})(jQuery);
</script>