jQuery的。點擊和媒體查詢

我有這個jQuery的小片段：jQuery的。點擊和媒體查詢

jQuery('.openSubMenu').click(function() { 
    jQuery(this).parent().children('ul').slideToggle(); 
});

這是打開/關閉導航菜單。我有2個媒體查詢，@media only screen and (max-width : 568px)和@media only screen and (min-width : 569px) and (max-width : 974px)。

上面的jQuery只適用於小於568的媒體查詢，一旦屏幕超過568像素，它什麼也不做。我試過寫一個完整的直接路徑到我想要打開的子菜單，但它仍然沒有任何東西。控制檯中也沒有錯誤。

的HTML是一個非常基本的無序列表，下面是一個例子：

<ul> 
    <li></li> 
    <li> 
     <ul> 
      <li></li> 
     </ul> 
     <span class="openSubMenu"></span> 
    </li> 
</ul>

第二級<ul></ul>最初設置爲display:none。就像我說的那樣，點擊功能在屏幕寬度上工作得很好，但是在568像素以下。除了一些定位更改外，此列表的兩個媒體查詢中的CSS都幾乎相同。

來源

2014-01-22 AndyWarren

愚蠢的問題，但是，你正在使用CSS3支持的瀏覽器？ – Codeman

是的，我是。這也發生在所有瀏覽器中。 – AndyWarren

很酷，只是想我會問。您是否嘗試從第二媒體查詢和測試中移除最大寬度要求？ – Codeman

我發現在調整屏幕大小後，上面的.click函數以某種方式丟失了（因爲沒有更好的術語）。我添加了一些東西來觀察調整大小，然後在調整大小後再次添加jQuery片段，它似乎解決了我的問題。我仍然想知道爲什麼發生這種情況，並且有更好的解決方案。

下面是修改jQuery的似乎有固定的：

jQuery('.openSubMenu').click(function() { 
    jQuery(this).parent().children('ul').slideToggle(); 
}); 

jQuery(window).smartresize(function() { 
    jQuery('.openSubMenu').click(function() { 
     jQuery(this).parent().children('ul').slideToggle(); 
    }); 
});

來源

2014-01-23 16:45:26 AndyWarren

jQuery的。點擊和媒體查詢

回答

相關問題