Question

我希望我的代码执行以下操作：如果屏幕宽度小于651，请设置一个列表，该列表是要显示的子菜单：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/

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

Answer 2

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

@media (max-width:650px) {

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

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

2 个答案: