jQuery .click 和媒体查询

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();
    });
});