Question

我有这个小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几乎相同。

Answer 1

我发现在调整屏幕大小后，上面的.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();
    });
});

jQuery .click和媒体查询

1 个答案: