関数の実行を画面の幅によって制御したい。

###前提・実現したいこと
サイトをロード、リサイズしたとき、
グローバルナビについて、640px以上のときはホバーしたときに
アコーディオンがスライドするようにして、640px以下のときは
クリックしたときにスライドするようにしたい。

###発生している問題・エラーメッセージ
640px以上のときはpcNavAction()という関数が実行され、
640px以下のときはspNavAction()という関数が実行されるようにしたい。

現状は
640px以上のときにサイトをロード、リサイズすると、
pcNavAction()という関数が実行され、また640px以下のときでも実行される。
spNavAction()は実行されない。

640px以下のときに、サイトをロード、リサイズすると
spNavAction()という関数は実行されず、pcNavAction()も実行されない。
640px以上になるとpcNavAction()が実行される。

変数breakPに640を代入しています。

###ソースコード

javascript
1$(window).on("load resize", function() {
2    if ($(this).width() > breakP) {
3        pcNavAction();
4    } else {
5        spNavAction();
6    }
7});
8
9function pcNavAction() {
10    $accordion.on({
11        'mouseenter': function() {
12            $(this).find('ul').stop().slideDown();
13            $(".conf").css('border-bottom', '3px solid #006CB2');
14        },
15        'mouseleave': function() {
16            $(this).find('ul').stop().slideUp();
17            $(".conf").css('border-bottom', '');
18        }
19    });
20};
21
22function spNavAction() {
23    $accordion.on('click', function() {
24        $(this).find('ul').slideToggle();
25    });
26};

よろしくお願いいたします。

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

回答3件

onのバインドは、一度関連づけられると意図的にoffにしないと関連づけられたままです。
なので、現行の書き方だと両方が適用された状態が生まれています。
それが不具合の原因です。

投稿2016/02/25 00:50

yamato_hikawa

総合スコア2092

退会済みユーザー

2016/02/25 01:59

その通りでした。 on.offの使い方を理解していけるよう努力したいです！

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

JavaScriptの制御もレスポンシブにしたいよね。
matchMediaがいいよ。

投稿2016/02/24 15:47

退会済みユーザー

総合スコア0

退会済みユーザー

2016/02/25 01:57

matchMediaメソッドがあるの初めてしりました！今後、勉強して活用していきたいです！

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

ベストアンサー

発生している問題に対処できたかは分かりませんが
実現したいことの仕様に基づくコードを書いてみました。
これでどうでしょうか。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>28198</title>
6    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
7    <script>
8      $(function(){
9        var breakP = 640;
10        var $accordion = $(".accordion");
11        var is_sp = null; // 追加: 今sp用表示か？
12        
13        $(window).on("load resize", function() {
14          if ($(this).width() > breakP && is_sp !== false) {
15            // ウィンドウサイズが640超過かつ
16            // 現在の表示がsp用表示の場合(または初回)に呼び出される
17            pcNavAction();
18          } else if ($(this).width() <= breakP && is_sp !== true) {
19            // ウィンドウサイズが640以下かつ
20            // 現在の表示がpc用表示の場合(または初回)に呼び出される
21            spNavAction();
22          }
23        });
24        
25        function pcNavAction() {
26          $accordion.off('click'); // 追加: sp用ハンドラを削除
27          $accordion.on({
28            'mouseenter': function() {
29              $(this).find('ul').stop().slideDown();
30              $(".conf").css('border-bottom', '3px solid #006CB2');
31            },
32            'mouseleave': function() {
33              $(this).find('ul').stop().slideUp();
34              $(".conf").css('border-bottom', '');
35            }
36          });
37          is_sp = false; // 追加: pc用に切り替えた
38        }
39
40        function spNavAction() {
41          $accordion.off('mouseenter mouseleave'); // 追加: pc用ハンドラを削除
42          $accordion.on('click', function() {
43            $(this).find('ul').slideToggle();
44          });
45          is_sp = true; // 追加: sp用に切り替えた
46        }
47      });
48    </script>
49    <style>
50      .accordion {
51        background-color: #eee;
52        padding: 5px;
53      }
54      
55      ul {
56        background-color: #ddd;
57      }
58    </style>
59  </head>
60  <body>
61    <div class="accordion">
62      <p>open/close</p>
63      <ul>
64        <li>foo</li>
65        <li>bar</li>
66        <li>baz</li>
67      </ul>
68    </div>
69  </body>
70</html>

違った書き方。

JavaScript
1$(function(){
2  var breakP = 640;
3  var is_sp = null;
4  
5  $(".accordion").on({
6    'mouseenter': function() {
7      if(is_sp) return; // pc用表示でない場合は終了
8      $(this).find('ul').stop().slideDown();
9      $(".conf").css('border-bottom', '3px solid #006CB2');
10    },
11    'mouseleave': function() {
12      if(is_sp) return; // pc用表示でない場合は終了
13      $(this).find('ul').stop().slideUp();
14      $(".conf").css('border-bottom', '');
15    },
16    'click': function() {
17      if(!is_sp) return; // sp用表示でない場合は終了
18      $(this).find('ul').slideToggle();
19    }
20  });
21  
22  $(window).on("load resize", function() {
23    is_sp = $(this).width() <= breakP;
24  });
25});