我在这里有一些问题。jquery脚本似乎停止工作后，css媒体查询踢

如果我运行脚本，当窗口宽度高于800像素时，将加载菜单。然后，我调整窗口的大小在800像素以下，菜单用一个按钮换出。但该按钮不起作用。如果我调整800px以上的窗口大小，菜单会再次出现，因为它应该是。

如果我运行脚本，当窗口宽度低于800px时，按钮将起作用。但是，然后我调整窗口800px以上的大小，菜单不会出现（除非我在调整大小之前将其保持打开状态），它应该。如果我再次调整800px以下的窗口，按钮仍然有效。

当窗口宽度低于800px时，jQuery部分只能工作。

我不知道为什么这不应该工作？

http://jsfiddle.net/y35axgpg/7/

更新

感谢您的帮助，显然今天我太累了，不应该在这个时候进行合作。你告诉我，我已经知道了，但需要一个正确的方向。

这就是我想出了：https://jsfiddle.net/y35axgpg/15/

jQuery的

if ($("#menu_button").css("display") == "inline-block") { 

    $("#menu_button").click(function() { 
    $("#main_menu").toggle("slide"); 
    }); 

}

CSS

#main_menu { 
    border: 1px solid #000000; 
    width: 100%; 
    height: 35px; 
    display: block; 
    position: absolute; 
    top: 80px; 
    left: 0; 
} 

#menu_button { 
     display: none; 
    } 

@media screen and (max-width: 800px) { 

    #main_menu { 
    display: none; 
    width: 200px; 
    height: 100%; 
    } 

    #menu_button { 
     display: inline-block; 
    } 

}

来源

2017-10-28 Jacob Christensen

当然它只能如果屏幕尺寸小于800像素，因为你如果检查 – JavaEvgen

声明你的'。点击（）'函数之外的'if'条件，然后'.trigger（'点击'）''。在if条件中单击（）函数。 **例如：** https://jsfiddle.net/y35axgpg/10/ – UncaughtTypeError

当条件计算为true只被束缚你.click()事件 - 这只能在页面加载IF条件已经发生真正 - 就像当屏幕尺寸小于800px。

在if条件之外声明您的.click()函数，以便它始终绑定到该按钮。然后.trigger('click').click()函数在if的条件下。

如：https://jsfiddle.net/y35axgpg/10/

$("#menu_button").click(function() { 
 
    $("#main_menu").toggle(); 
 
}); 
 

 
if ($("#menu_button").css("display") == "inline-block") { 
 

 
    $("#menu_button").trigger('click') 
 

 
}

#main_menu { 
 
    border: 1px solid #000000; 
 
    width: 100%; 
 
    height: 35px; 
 
    display: block; 
 
    position: absolute; 
 
    top: 80px; 
 
    left: 0; 
 
} 
 

 
#menu_button { 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 800px) { 
 
    #main_menu { 
 
    display: none; 
 
    width: 200px; 
 
    height: 100%; 
 
    } 
 
    #menu_button { 
 
    display: inline-block; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="menu_button">Menu</button> 
 
<div id="main_menu">[link] | [link] | [link] | [link] | [link]</div>

来源

2017-10-28 19:32:32 UncaughtTypeError

的问题是 “在脚本运行时”。脚本只在页面加载时运行，而不是在页面调整大小时运行。所以在你的情况下，如果你加载的页面大于800像素，事件监听器将不会被绑定到按钮。

你可以通过删除if语句来解决这个问题，因为我没有看到它的用处，这种方式事件监听器总是被绑定到按钮上。

来源

2017-10-28 19:32:02

jquery脚本似乎停止工作后，css媒体查询踢

更新

回答

相关问题