ご質問にあるコードは次の様にした方が良いと思います。
但し、この内容だとdt要素にtoggleが適用されているのでページ読み込み時にdt要素が隠れてしまいます。
また、toggleは表示非表示を切り替えるだけなのでこのままだとクリックしても反応しません。
lang
1$(function(){
2 $("dt").toggle(
3 function(){
4 $(this).next("dd").css("display","block");
5 },
6 function(){
7 $(this).next("dd").css("display","none");
8 }
9 ); // セミコロンのつけ忘れ
10}); // 同じくセミコロンのつけ忘れ
いくつか方法はあると思いますが、次の様な方法が(私には)分かりやすいです。
lang
1$( function() {
2
3 // ページ読み込み時はdd要素を非表示(CSSで非表示にしても良いです)
4 $( 'dd' ).hide();
5
6 // イベント内で使うフラグ用の変数の初期値
7 var flag = 'close';
8
9 // dt要素をクリックした時のイベント
10 $( 'dt' ).click( function() {
11
12 // dt要素の次にあるdd要素をトグル(dd要素が複数続く場合はnextAllメソッドを使う)
13 $( this ).next( 'dd' ).slideToggle();
14
15 // 変数 flag の値が 'close' の時
16 if ( flag === 'close' ) {
17
18 // クリックしたdt要素のテキストを '閉じる' に変更
19 $( this ).text( '閉じる' );
20
21 // 変数 flag の値を 'open' に変更
22 flag = 'open';
23
24 // 変数 flag の値が 'close' 以外の時
25 } else {
26
27 // クリックしたdt要素のテキストを '開く' に変更
28 $( this ).text( '開く' );
29
30 // 変数 flag の値を 'close' に変更
31 flag = 'close';
32
33 }
34
35 });
36
37});
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/07/01 06:29
2015/07/01 07:50
退会済みユーザー
2015/07/01 08:59
2015/07/01 09:54
退会済みユーザー
2015/07/01 11:48
2015/07/01 12:51
退会済みユーザー
2015/07/01 15:53