wordpress レスポンシブ　jQuery　width();が反映されない

###解決したいこと
wordpressのオリジナルテーマ製作でjQueryにてウィンドウの幅を変えた時にウィジェットにクリックイベントでアコーディオン機能をつけたいのですが動作してくれません。きちんと動作するようにするにはどうしたらよいでしょうか。

###jQuery

<?php wp_deregister_script('jquery'); ?>
    <!-- WordPressのjQueryを読み込ませない --></p>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script></p>
    <script>
	$(function(){
	var $w = $('window').width();
	var $x = 1000;
	if($w<=$x){
	$('.widget').click(function(){
	var $widget-open = $(this).find('ul');
	if($widget-open.hasClass('open')){
         $widget-open.removeClass('open').slideUp();
	} else {
	 $widget-open.addClass('open').slideDown();
	}
	});
	}

	 });
	 </script>

###html

<div class="sidebar-wrapper">
	<div id="sidebar" role="complementary">
		<ul>
			<li id="categories-2" class="widget widget_categories"><h2 class="widgettitle">テスト</h2>
		<ul>
	<li class="cat-item cat-item-1"><a href="http://dream77.wp.xdomain.jp/category/%e6%9c%aa%e5%88%86%e9%a1%9e/" >未分類</a>
</li>
		</ul>
</li>
<li id="archives-4" class="widget widget_archive"><h2 class="widgettitle">アーカイブ</h2>
		<ul>
			<li><a href='http://dream77.wp.xdomain.jp/2016/11/'>2016年11月</a></li>
	<li><a href='http://dream77.wp.xdomain.jp/2016/10/'>2016年10月</a></li>
		</ul>
		</li>
<li id="text-2" class="widget widget_text">			<div class="textwidget"></div>
		</li>
<li id="pages-2" class="widget widget_pages"><h2 class="widgettitle">固定ページ</h2>
		<ul>
			<li class="page_item page-item-54"><a href="http://dream77.wp.xdomain.jp/%e3%81%a6s%e3%81%a8/">てsと</a></li>
<li class="page_item page-item-2"><a href="http://dream77.wp.xdomain.jp/sample-page/">サンプルページ</a></li>
		</ul>
		</li>
		<li id="recent-posts-2" class="widget widget_recent_entries">		<h2 class="widgettitle">最近の投稿</h2>
		<ul>
					<li>
				<a href="http://dream77.wp.xdomain.jp/2016/11/14/200%e6%96%87%e5%ad%97/">200文字</a>
						</li>
					<li>
				<a href="http://dream77.wp.xdomain.jp/2016/11/14/%e3%82%a4%e3%83%b3%e3%83%87%e3%83%83%e3%82%af%e3%82%b9/">インデックス</a>
						</li>
					<li>
				<a href="http://dream77.wp.xdomain.jp/2016/11/14/%e4%bb%8a%e6%97%a5%e3%81%af%e5%b1%b1%e7%94%b0%e3%81%ae%e6%97%a5/">今日は山田の日</a>
						</li>
					<li>
				<a href="http://dream77.wp.xdomain.jp/2016/10/29/ilove%e7%8c%ab/">Ilove猫</a>
						</li>
					<li>
				<a href="http://dream77.wp.xdomain.jp/2016/10/29/%e3%81%86%e3%81%a1%e3%81%ae%e7%8c%ab/">うちの猫</a>
						</li>
				</ul>
		</li>
				</ul>
	</div>
</div><!--/.sidebar-wrapper-->

行動規範の内容に同意します

回答1件

ベストアンサー

windows幅が1000以下になった時だけ、ウィジェットにアコーディオン機能をつけたいという事でいいですか？
1000より大きい場合はクリックしてもアコーディオン機能は働かないという意味？

であれば

作りとして、上記では最初に一度windows幅を取得しているだけになるので正常に動作しないです。

作りとしてはあくまで１案ですが

windowがリサイズされるごとにwindowの幅を判定してウィジェットにアコーディオン機能をつけるかつけないか判定しないといけないとおもいますので、

まず
http://www.jquerystudy.info/reference/events/resize.html

そしてアコーディオン機能をつけるという部分は
上記のresizeイベントの中で1000以下になったらウィジェットにクリックイベントをつける、1000より大きいならクリックイベントはずすのようにしたらどうですか？

$('.widget').on('click', function() {....
と
$('.widget').off('click');

の切り替え

↑失礼、すでにwidgetというクラス名がついているのですね、修正しました。

追記

<html>
<head>
<meta charset='utf-8'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<style>
    .menu dt {
        border:1px solid #000;
    }
    .menu dd{
        border:1px solid #000;
        border-top:none;
        margin:0;
        padding:0;
    } 
</style>
<body>

<dl class="menu">
<dt>タイトル</dt>
<dd>
コンテンツ<br>
コンテンツ<br>
コンテンツ<br>
コンテンツ<br>
コンテンツ<br>
コンテンツ<br>
コンテンツ<br>
</dd>
</dl>

<script>
    $(function(){
        $(window).on('load resize',function(){
            if($(window).width() <= 1000)
            {
                if(!$(".menu").hasClass("open"))
                {
                    $(".menu dd").slideUp();
                    $(".menu").addClass("open");
                    $(".open").on('click',function(){
                        $(".menu dd").slideToggle();
                    });
               }
            }
            else
            {
                if($(".menu").hasClass("open"))
                {
                    $(".open").off('click');
                    $(".open").removeClass("open");
                    $(".menu dd").slideDown();
                }
            }

        });
    });
</script>
</body>
</html>

追記

提示いただいたhtmlから後ほど、ハンドラーをon,offする方向性でのソースも作ってみますが、いただいたソースでいうと
外側の<li>をクリックしたらその内部の<ul>をトグルするという動作でよいのですよね？
少し考え方変えて、別アプローチのものを先に提示しておきます。
cssで1000px以下の時は中のul非表示、1000pxよりおおきければ表示し、外の<li>のclickイベントで1000以下の時とみトグル処理

css
1.widget ul{
2    display: none;
3}
4@media screen and (min-width: 1001px) {
5    .widget ul{
6        display: block;
7    }
8}

javascript
1<script>
2    $(function(){
3        $(".widget").click(function(){
4            if($(window).width() <= 1000)
5            {
6                $(this).children("ul").toggle();
7            }
8        });
9    });
10</script>

###追記 on off版

javascript
1<script>
2    $(function(){
3
4        $(window).on('load resize',function(){
5            if($(window).width() <= 1000)
6            {
7                if(!$(".widget").hasClass("open"))
8                {
9                    $(".widget").children("ul").slideUp();
10                    $(".widget").addClass("open");
11                    $(".open").on('click',function(){
12                        $(this).children("ul").toggle();
13                    });
14               }
15            }
16            else
17            {
18                if($(".widget").hasClass("open"))
19                {
20                    $(".open").off('click');
21                    $(".open").removeClass("open");
22                    $(".widget").children("ul").slideDown();
23                }
24            }
25        });
26
27    });
28</script>

resizeイベントが頻出する理由からもう一方の方法、clickイベントの中で判定するほうがコーディング量もすくなく負荷もすくなそうですね。

投稿2016/11/09 11:56

編集2016/11/23 08:59

hiim

総合スコア1689

kotori_00

2016/11/12 06:05 編集

回答ありがとうございます。アドバイス頂いた通り試してみましたが、うまくいきません。（ｉ _ ｉ） <script> $(function(){ 　　$(window).resize(function(){ 　　　　　var $w = $(window).width(); 　　　　　var $x = 1000; 　　　　　　　　if($w<=$x){ 　　　　　　　　$('.widget').on('click',function(){ 　　　　　　　　var $widgetOpen = $(this).find('ul'); 　　　　　　　　　　　　　　if($widgetOpen.hasClass('open')){ 　　　　　　　　　　　　　　$widgetOpen.removeClass('open').slideUp(); 　　　　　　　　　　　　　　} else { 　　　　　　　　　　　　　　$widgetOpen.addClass('open').slideDown(); 　　　　　　　　　　　　　　} 　　　　　　　　});} else { 　　　　　　　$('.widget').off('click'); 　　　　　　　} 　　　}); }); 　　　　　　　</script> このコードだと、最初っから1000px以内の表示だとクリックイベントが動作しません。一度ブラウザの横幅を動かして、横幅を1000px以内だと認識させないとクリックイベントが動作しません。しかも動作しても、クリックしたところスライドアップとスライドダウンが１往復くらい自動的に続いて、それ以降はクリックしても動作しません。何がいけないのでしょうか。 ※コメントを何度か修正させていただきました。

kotori_00

2016/11/12 06:37

追記：iPhoneで動作を確認したところ、きちんと動くには動くのですが動作が安定せず、上記と同じような状況が時々おこります。今まではパソコンだけでの確認だったのですが、安定して動作させるにはどうしたらよいのでしょうか。。( ；´Д｀)

hiim

2016/11/12 09:02

追記しました。リサイズイベントは大量に発生するのでそれで全イベントにonが実行されたりがよくなかったのかなと思います。

kei344

2016/11/12 09:25

横から失礼します。 iOS Safari ではスクロールしただけでリサイズイベントが発生するようです。【知ってる？ iOS Safariでスクロールしただけでリサイズイベントが発生する原因と対処法 - Qiita】 http://qiita.com/tonkotsuboy_com/items/d32ec6e7a1f6f592d415

hiim

2016/11/12 13:21

> kei344様　ありがとうございます。なるほど、アドレスバーを隠したらする動作もサイズ変更になりますものね。。。ほぼバックエンドな人間の為、そういう情報助かりますm(_ _)m

kotori_00

2016/11/23 07:46

kotori_00

2016/11/23 08:07

kei344さん役にたつ情報ありがとうございます。

hiim

2016/11/23 08:09

こちらでも確認しますので、ulや.widgetが使われている部分のhtmlも提示できますか？

kotori_00