jquery - 尽管有媒体查询，但在窗口调整大小后仍显示切换元素

Question

我希望我的代码执行以下操作:如果屏幕宽度小于 651，则设置一个列表作为要显示的子菜单:无；并使菜单可切换。

代码如下:

HTML:

 <ul id="main_menu">
<li class="mainpoint">
<div class="mainpoint_content" id="some">some</div>
<ul class="submenu_1">
<li class="submenu_point"><a href="">some</a></li>
</ul>
</li>

CSS:

    .submenu_1 {
        display:block;
        padding:3%;
    }

 @media (max-width:650px) {

        .submenu_1 {
            padding:2%;
            display:none;
        }

JS:

$( document ).ready(function() {
        $("#some").click(function(){

            if ($(window).width() < 651) {
                $(this).next().toggle();
            }

        });

        $(window).resize(function() {
                if ($(this).width() > 651) {
                    $(".submenu_1").show();
                }               
        });

});

工作正常，除了一点:

当屏幕宽度小于 650 并且我切换菜单以便显示子菜单，然后我将屏幕大小调整为大于 651 时，这个切换的子菜单仍然显示(这很好)。然而，当我再次调整到小于 650 时，菜单仍然显示，尽管根据我的媒体查询，它不应该显示。切换是否优先于此处的媒体查询？

Answer 1

@Barmar 在上面关于 hide() 添加的内联样式是正确的，但是他的解决方案破坏了您的 javascript。您应该在 JS 中添加一个 else block 以显示 651 像素以上的子菜单，例如:

其他{
$(".submenu_1").隐藏();
}

http://jsfiddle.net/3zgs04x8/

顺便说一下，两个查询之间有 1 像素的差距——大于 651，小于 651——所以如果屏幕是 651 像素，它就会困惑。也许这没什么大不了的，但您仍然应该考虑到这一点(就像我在示例中所做的那样)。