jQueryを使用してブラウザの幅（サイズ変更）に基づいてcilckクラスを切り替えます

Question

トグルクラスが付いたボタンがあります。ボウワーサイズが1200px未満の場合にのみ有効です。リフレッシュ後に動作しますが、ウィンドウのサイズを変更すると、時にはうまく動作しないことがあります。パターンを見ることができません。私はdevのツールでは、要素がhiglighted（ので、hteスクリプトは何かをやっている）を参照してくださいが、私はクラスを切り替えるしないでください。 addClass/removeClassに変更しようとしましたが、結果は同じです。どのようにそれを動作させるためのアドバイスは、非常に高く評価されるだろう。

CodePen：http://codepen.io/miunik/pen/oLWOLY

HTML：

<ul class="level-1"> 
    <li class="btn">1 level item 
    <ul class="level-2"> 
     <li>2 level item</li> 
     <li>2 level item</li> 
     <li>2 level item</li> 
     <li>2 level item</li> 
    </ul> 
    </li> 
</ul> 

CSS

ul.level-2 { 
    display: none; 
} 

ul.level-2.open { 
    display: block; 
} 

のjQuery：

$(document).ready(function() { 
    function setNav() { 
    if (window.outerWidth < 1200) { 
     $('.btn').on({ 
     click: function() { 
      $(this).children('.level-2').toggleClass('open'); 
     } 
     }); 
    } 
    } 
    setNav() 
    $(window).resize(function() { 
    setNav(); 
    console.log(window.outerWidth); 
    }); 
}); 

Answer 1

多くのイベントハンドラをバインドするという問題は、ウィンドウresizeイベントが発生するたびに、各<li>タグ（レベル1のタグだけでなく）が新しいものを取得することです。したがって、toggleClass()が実際にトグルするかどうかは、イベントハンドラの数に依存します。

私は、.level-1のすぐ下の<li>タグだけを識別し、このハンドラの画面サイズを尋ねるセレクタと組み合わせて、文書上に1つのハンドラをバインドします。あなたはそれのためにresizeハンドラを必要としません。

$(document).ready(function() { 
    $(document).on("click", ".btn", function() { 
    if (window.outerWidth < 1200) { 
     $(this).children('.level-2').toggleClass('open'); 
    } 
    }); 
}); 

ここで働くの例を参照してください：https://jsfiddle.net/wu1unvek/

窓が大きくなる場合、それはあなたがopenクラスを削除するには、とにかくresize()ハンドラをしたいということであるかもしれない：

$(window).resize(function() { 
    if (window.outerWidth >= 1200) { 
    $(".level-2").removeClass("open"); 
    } 
}); 

EDIT：修正された質問コードに適合：.level-1 > liの代わりに.btnを使用してください。

EDIT 2：例を追加しましたウィンドウが大きく