通過jQuery根據瀏覽器寬度（調整大小）切換Cilck上的類

Question

我有一個帶切換類的按鈕 - 只有當調整大小低於1200px時才能使用。它在刷新後工作，但不知何故，當我調整它有時工作的窗口的大小，有時不 - 看不到模式。我在開發工具上看到元素被加亮（所以腳本正在做某事），但我沒有切換類。試圖將其更改爲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>標籤的選擇器，並要求在此處理程序中的屏幕尺寸。你甚至不需要一個resize處理程序。

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

看到這裏工作的例子：https://jsfiddle.net/wu1unvek/

這可能是你想要一個resize()處理器反正如果窗口變大卸下open類：

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

編輯：適應修改的問題代碼：使用.btn而不是.level-1 > li

編輯2：新增例如爲resize()重置open類，如果窗口變大