jQuery .click 和媒体查询答案

【问题标题】：jQuery .click and media queriesjQuery .click 和媒体查询
【发布时间】：2014-01-24 00:45:26
【问题描述】：

我有这个小的 jQuery sn-p:

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 除了一些位置变化外几乎相同。

【问题讨论】：

愚蠢的问题，但是，您使用的是支持 CSS3 的浏览器？
是的，我是。这也发生在所有浏览器中。
酷，我只是想问问。您是否尝试过从第二个媒体查询中删除最大宽度要求并测试它是否有效？
是的。在过去的一个小时里，我确实尝试了我能想到的一切。我没有得到它。

标签： jquery css responsive-design

【解决方案1】：

我发现在调整屏幕大小后，上面的 .click 功能不知何故丢失了（因为没有更好的术语）。我添加了一些东西来观察调整大小，然后在调整大小后再次添加 jQuery sn-p，它似乎解决了我的问题。我仍然想知道为什么会发生这种情况，并且有更好的解决方案。

这是修改后的 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();
    });
});

【讨论】：