#したいこと
レスポンシブなページにて、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);
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/07 00:28 編集
2017/03/06 10:39
2017/03/07 00:31
2017/03/07 01:34
2017/03/07 01:48
2017/03/07 01:59
2017/03/07 02:08