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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

1回答

2502閲覧

レスポンシブなページにてjsを制御できません

pythago

総合スコア47

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2017/03/06 09:05

編集2017/03/07 00:29

#したいこと
レスポンシブなページにて、toggleClassを使い分けたいです。
具体的には、あるウィンドウ幅以下の時にはtoggleClassが動作し、
それ以上の時にはtoggleClassを効かないようにしたいです。

html

1<dl> 2 <dt>hoge</dt> 3 <dd style="display: none">fuga</dd> 4</dl>

#試みたこと
https://kadoppe.com/archives/2012/02/jquery-window-resize-event.html を参考にリサイズ時のjsの処理を書き分けようとしました。

Javascript

1(function($){ 2 "use strict"; 3 4 var w = $(window).width(); 5 var x = 768; 6 var timer = false; 7 $(window).resize(function() { 8 var w = $(window).width(); 9 if(w < x){ 10 if (timer !== false) { 11 clearTimeout(timer); 12 } 13 timer = setTimeout(function(){ 14 console.log('ta'); 15 }, 200); 16 } 17 }); 18})(jQuery);

ウィンドウ幅で分岐させたjsは正常に動作したので、
次はslideToggleを用いるように書き換えました。
するとリサイズ時にslide_toggle()が正常に行われず、
またreturn falseを書かないとslide_toggle()が複数回起こってしまいました。return falseの役割をclearTimeoutがしているのかなと考えているので、return falseを書いてはならないような気もしています。

Javascript

1(function($){ 2 "use strict"; 3 4 var w = $(window).width(); 5 var x = 768; 6 function slide_toggle() { 7 $('dt').on('click',function(){ 8 $(this).next('dd').slideToggle(); 9 $(this).toggleClass('open'); 10 }); 11 } 12 if(w < x){ 13 slide_toggle(); 14 } 15 var timer = false; 16 $(window).resize(function() { 17 var w = $(window).width(); 18 if(w < x){ 19 if (timer !== false) { 20 clearTimeout(timer); 21 return false; 22 } 23 timer = setTimeout(slide_toggle(), 200); 24 } 25 }); 26})(jQuery);

どなたかご教授いただけますでしょうか?

#追記

Javascript

1(function($) { 2 3 "use strict"; 4 var x = 768; 5 var w = $(window).width(); 6 if(w < x){ 7 $('dd').css('display','none'); 8 } 9 $('dt').on('click', function() { 10 if (w > x){ return false; } 11 $( this ).next( 'dd' ).slideToggle(); 12 $( this ).toggleClass( 'open' ); 13 } ); 14 var timer = false; 15 $(window).resize(function() { 16 var w = $(window).width(); 17 if(w < x){ 18 if (timer !== false) { 19 clearTimeout(timer); 20 } 21 timer = setTimeout(function(){ 22 $('dd').css('display','none'); 23 }, 200); 24 } 25 }); 26})(jQuery);

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

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

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

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

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

guest

回答1

0

ベストアンサー

難しいことを考えずこれでいけるような。

JavaScript

1( function( $ ) { 2 "use strict"; 3 var x = 768; 4 $( 'dt' ).on( 'click', function() { 5 if ( $( window ).width() > x ) { return false; } 6 $( this ).next( 'dd' ).slideToggle(); 7 $( this ).toggleClass( 'open' ); 8 } ); 9} )( jQuery ); // 未テスト

投稿2017/03/06 09:34

kei344

総合スコア69364

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

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

pythago

2017/03/07 00:28 編集

ありがとうございます。動きました。 ただ、ウィンドウ幅がある一定以下になった時に ``dt`` を非表示したく、以下の記述を加えたところ slideToggleがウィンドウ幅に依存しなくなり、初期状態のウィンドウ幅に依存してslideToggleが動くようになりました。 何かが衝突しているような気がするのですが、いったいどこなのでしょうか?
kei344

2017/03/06 10:39

slideToggleが書かれていないのでコードの一部と推測します。コメント欄ではコードブロックが効かないため、質問文に全体を追記していただけませんか?よろしくお願いします。
pythago

2017/03/07 00:31

すいません、コード全体を質問文に追記いたしましたので、お答えいただけますでしょうか?
kei344

2017/03/07 01:34

$( 'dt' ).on( 'click' の中の w が固定値だからです。ロード時に決まった値で判断することになり、「初期状態のウィンドウ幅に依存してslideToggleが動くようになり」ます。 if ( $( window ).width() > x ) { return false; } に戻せば動くと思いますよ。
pythago

2017/03/07 01:48

ありがとうございます! ウィンドウ幅を直接書くことで、動作するようになりました。 そうすると上手くいかなかった原因は 変数のスコープを認識できていなかったところになるのでしょうか?
kei344

2017/03/07 01:59

先ほどのコメントで説明したつもりなのですが、$( 'dt' ).on( 'click' でスライドさせるかさせないかの判定を 「768 と w(ロード時のウィンドウ幅)」 で行うのと、 「768 と $( window ).width() (クリックされた時点でのウィンドウ幅)」 で行うのとは違いますよね? そこの問題です。スコープが違って読めないとかそういうものではありません。
pythago

2017/03/07 02:08

タイミングの違いだったのですね。 理解することが出来ました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問