-PR-
  • すぐに回答を!
  • 質問No.6891017
解決
済み

アコーディオンパネルで複数のリンクを展開する方法

  • 閲覧数1189
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 54% (6/11)

こんばんわ。Jquery超初心者です。

Jqueryでアコーディオンパネルを実装しようとしているのですが、Jqueryの指定に問題があるようで、
開きません。以下コードです。

(HTML)

<ul class="slide">
<li><a href="">窓口業務</a>
<ul>
<li><a href="">menu 1-1</a></li>
<li><a href="">menu 1-2</a></li>
<li><a href="">menu 1-3</a></li>
</ul>
</li>
<li><a href="">異動業務</a>
<ul>
<li><a href="">menu 2-1</a></li>
<li><a href="">menu 2-2</a></li>
<li><a href="">menu 2-3</a></li>
</ul>
</li>
<li><a href="">検針業務</a>
<ul>
<li><a href="">menu 3-1</a></li>
<li><a href="">menu 3-2</a></li>
<li><a href="">menu 3-3</a></li>

</ul>
</li>
<li><a href="">調定業務</a>
<ul>
<li><a href="">menu 4-1</a></li>
<li><a href="">menu 4-2</a></li>
<li><a href="">menu 4-3</a></li>

</ul>
</li>
</ul>


(JQuery)

$(function () {
$("ul.slide li ul").hide();
$("ul.slide li").click(function () {
$("ul.slide li").each(function () {
if ($("ul.slide li").css("display")=="none"){
$("ul.slide li ul"). slideDown();
} else {
$("ul.slide li ul").slideUp();
}
});
});
});

eachの使い方が間違っているのか、はたまた何か足りない記述があるのか、途方に暮れています。

何かお気づきの方、ご指摘の程宜しくお願い致します。
通報する
  • 回答数1

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

  • 回答No.1
レベル12

ベストアンサー率 52% (203/388)

私ならこうします。
#動作確認はしていませんので、動かなかったらスミマセン。

$(function() {
 $("ul.slide ul").hide();
 $("ul.slide > li > a").click(function() {
  $(this).next().slideToggle();
 });
});

ポイントは
・セレクタの'>'は子要素の意味(http://www.tg.rim.or.jp/~hexane/ach/lbcs/lbcs2-02.htm#s2-2-2
・途中のthisはクリックされたaエレメントを示している
・スライドの表示非表示はslideToggleが便利(http://semooh.jp/jquery/api/effects/slideToggle/%5Bspeed%5D,+%5Bcallback%5D/

>if ($("ul.slide li").css("display")=="none")
の$("ul.slide li")は、slideクラス配下の全li要素を表しているので問題があります。うまくthisを使うのが得策です。

ちなみに、jQueryUIにAccordionがあるので、それを使う手もありかもしれません。
http://jqueryui.com/demos/accordion/
お礼コメント
majunian

お礼率 54% (6/11)

返事が遅くなり申し訳ございません。

以下のコードで実現できました。


$(function () {
$("ul.slide li ul").css("display", "none");
$("ul.slide li").click(function () {

$("ul", this).slideToggle();

});
});


slideToggleの有用性が理解出来ました。ありがとうございました。
投稿日時 - 2011-07-25 10:05:56
-PR-
-PR-
  • 回答数1
このQ&Aのテーマ
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ