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的。点击和媒体查询

回答

相关问题