質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

5556閲覧

コンテンツの一部を隠して、閉じる、開くボタンを使って、スライドトグルさせる物を、 JQUERYで作りたい

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

1クリップ

投稿2015/06/30 15:57

スマホサイトでよく見る、コンテンツの一部を隠して、閉じる、開くボタンを使って、スライドトグルさせる物を、
JQUERYで作りたいのですが、作り方を助言いただければ幸いです。

下記の例ように,で分ければ、一つ目を実行した後に、もう一度クリックすると二つ目が実行されるとできるのでしょうか?
そうであれば text()を使って、クリックすると、閉じるに変わって、二度目クリックすると続きを見るに変わるとできるのでしょうか?
$(function(){
$("dt").toggle(function(){
$("dd").css("display","block");
},
function(){
$("dd").css("display","none");
})})

ほかの作り方が一般的であれがそれでもかまいません。

nuttstock👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ご質問にあるコードは次の様にした方が良いと思います。
但し、この内容だと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/06/30 22:31

編集2015/07/01 09:56
flat

総合スコア617

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/07/01 06:29

ありがとうございます。 IFまで使わないとできないのですね。ここまで複雑だと思いませんでした。 var flag = 'close';が難しくてフラッグという部分がわかりませんがまず調べて実装してみます。 うまくいった時にBAにするので、お願いします。
flat

2015/07/01 07:50

var flag = 'close'; flagは変数名で、初期状態ではdd要素は閉じた状態なので値を'close'としています。 この変数は「現在の開閉状態を示す目印」として利用しています。 これは「閉じる・開く」というテキストの切り替えに対応するためのものです。 尚、html側のdt要素には「閉じる」というテキストを予め入れておいて下さい。
退会済みユーザー

退会済みユーザー

2015/07/01 08:59

ありがとうございます。できました。 フラッグが具体的に何なのかはわかりませんが、 ・こちらが、初期状態のtrue // イベント内で使うフラグ用の変数の初期値 var flag = 'close'; ・何かアクションを起した時のfalse // 変数 state の値が 'close' の時 if ( flag === 'close' ) ・そして、アクションを起こしたfalseの時に下記を実行。 if ( flag === 'close' ) { // クリックしたdt要素のテキストを '閉じる' に変更 $( this ).text( '閉じる' ); // 変数 state の値を 'open' に変更 flag = 'open'; // 変数 state の値が 'close' 以外の時 } ・起こしていないtrueの時には下記を実行 else { // クリックしたdt要素のテキストを '開く' に変更 $( this ).text( '開く' ); // 変数 state の値を 'close' に変更 flag = 'close'; } という事ですね。
退会済みユーザー

退会済みユーザー

2015/07/01 11:48

ありがとうございます。 確かにリンクにしないと問題ないですが、 $( 'dt' ).clickのdtを押せる感を出すためにリンクにした所、押すとリンクがただのテキストになってしまう問題が出ました。 $( this ).text( 'ログインするには?' );のテキストは、この例ならログインするには?のテキストだけ代えるのではなく、タグその物も代えてしまうのでしょうか? その場合はhtmlメソッドを使って、タグごと指定しないといけないのでしょうか?
flat

2015/07/01 12:51

それは指定している要素がa要素ではなくdt要素であるからです。 この場合、textメソッドはdt要素内の全てのテキストを対象とするので、dt要素内にあるa要素のテキストも当然含まれます。 参考 http://js.studio-kingdom.com/jquery/manipulation/text つまり、a要素のテキストだけを変えたい場合は以下のいずれかの方法でa要素を対象とする必要があります。 // this(dt)の子要素になるa要素を全て指定(セレクタ) $( 'a', this ).children( 'a' ).text( 'ログインするには?' ); // this(dt)の直下にあるa要素のみ指定(childrenメソッド) $( this ).children( 'a' ).text( 'ログインするには?' ); // this(dt)に連なるa要素を階層の深さに関わらず全て指定(findメソッド) $( this ).find( 'a' ).text( 'ログインするには?' ); しかし、リンクにマウスカーソルを合わせた時と同じカーソルにしたいだけでしたら、a要素を追加して前述の方法を用いるよりも、次の様にCSSを利用した方がhtmlもJavaScriptも変更する必要がなく簡単です。 dt { cursor: pointer; } 尚、これ以上はこのトピックの主旨から外れてしまうので、別途質問がある様でしたら新しく質問をされた良いと思います。
退会済みユーザー

退会済みユーザー

2015/07/01 15:53

ありがとうございます。 解決しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問