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

Question

我希望我的代码执行以下操作：如果屏幕宽度小于 651，则将作为子菜单的列表设置为 display:none;并使菜单可切换。

代码如下：

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 块以显示 651 像素以上的子菜单，例如：

else { $(".submenu_1").hide(); }

http://jsfiddle.net/3zgs04x8/

顺便说一句，两个查询之间有 1 像素的差距——大于 651，小于 651——所以如果屏幕是 651 像素，它就会搞砸。也许这没什么大不了的，但你仍然应该考虑到它（就像我在我的例子中所做的那样）。

Answer 2

jQuery 在对象上设置内联样式，该样式优先于样式表。您可以将!important 放在样式表中以使其优先。

@media (max-width:650px) {

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