こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

jQuery tabs 開閉式タブについて

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

知識不足です。。

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

開閉だけなら 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">メニュー1</a></li>
<li><a href="#tabs-2">メニュー2</a></li>
<li><a href="#tabs-3">メニュー3</a></li>
</ul>

<ul class="panel">
<li id="tabs-1"></li>
<li id="tabs-2"></li>
<li id="tabs-3"></li>
</ul>
</body>

投稿日時 - 2013-12-25 09:45:04

QNo.8399990

困ってます

質問者が選んだベストアンサー

少し違うかも…

こんなのでは? (って、判じ物じゃあるまいし…)

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

(全角空白は半角に)

投稿日時 - 2013-12-25 17:59:48

お礼

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

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

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

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

投稿日時 - 2013-12-25 19:23:48

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

マスターではないですが・・・
こういうことではないんですかね?

<ul class="tab">
<li><a href="#tabs-1">メニュー1</a></li>
<li><a href="#tabs-2">メニュー2</a></li>
<li><a href="#tabs-3">メニュー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>

投稿日時 - 2013-12-25 10:03:20

お礼

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

私のやり方がまずいのかやはり閉じる方がうまくいかず。。

コード自体は自ら複雑にしてしまっていることは気づきました。
キレイなコード勉強になりました。

投稿日時 - 2013-12-25 19:15:38

あなたにオススメの質問