jqueryのアコーディオンUIで下記のサンプルを参考に、開閉で開いたときに親要素(dt)にclassを付加する方法を詳細に教えてください

http://blog.caraldo.net/2009/03/newjqqookiemenu.php

回答の条件
  • 1人10回まで
  • 登録:
  • 終了:2010/11/15 15:26:53
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:Cherenkov No.1

回答回数1504ベストアンサー獲得回数493

ポイント100pt

>開閉で開いたときに

とありますが、きっとページを読み込んでアコーディオンが開いているときも

classが付いてほしいと思うので、そうなるように書きました。

変更箇所は初期設定とミソの部分です。

あと元サンプルの初期設定がおかしかったのでthisを使って効率改善したつもりです。

//初期設定
$("dd").each(function (i){
	if ($.cookie("cookName")) {
		if (($.cookie("cookName").indexOf(i)) != -1) {//※2
			// ****ミソ****
			$(this).show().prev('dt').addClass('open');
		} else {
			$(this).hide();
		}
	}else{
		$(this).hide();//cookieが無い場合は全て隠す
	}
});

//クリック時のfunction設定
$("dt").click(function(){
    // ****ミソ****
    $(this).toggleClass('open');
//~~~~~~~~~~~~~~~~~~

ソースコード

https://gist.github.com/674604

動作サンプル

http://jsfiddle.net/U6DrK/

id:technote7

ありがとうございます!出来ました。

「開いているときもclass追加」はまさにそのとおりでした。

参考にもう一つだけお聞きしたいのですが

[dl]

[dt]title[/dt]

[dd]menu-contents[/dd]

[/dl]

としたときにdlにclassを追加するのはどうすればよいのでしょうか…

2010/11/15 10:03:20
  • id:technote7
    あっているのか分かりませんが、下記に変更したところ
    親要素のdlにclass追加出来ました!

    // ****ミソ****
    $(this).show().parents('dl').addClass('open');

    // ****ミソ****
    $(this).toggleClass('open');

    $(this).parents('dl').toggleClass('open');
  • id:Cherenkov
    初期設定の部分、「ddの親要素はdlである」のは確定しているのでparent()のほうが効率がいいと思います。
    $(this).show().parent().addClass('open');

    次にクリック時のclass設定ですが、アコーディオンが複数ある場合、一つ閉じてももう一つは開いている場合もあるので
    単純にtoggleClassするのは注意が必要です。
  • id:Cherenkov
    >toggleClassするのは注意
    の対策。
    https://gist.github.com/700069
    こんな感じでしょうか。
    clickイベントでslideToggleされた後にコールバックして ddが表示されているか確認してclassを書き換えています。

  • id:technote7
    ありがとうございます、全て解決しました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません