jquery脚本似乎停止工作后,css媒体查询踢
我在这里有一些问题。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;
}
}
当条件计算为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>
的问题是 “在脚本运行时”。脚本只在页面加载时运行,而不是在页面调整大小时运行。所以在你的情况下,如果你加载的页面大于800像素,事件监听器将不会被绑定到按钮。
你可以通过删除if语句来解决这个问题,因为我没有看到它的用处,这种方式事件监听器总是被绑定到按钮上。
当然它只能如果屏幕尺寸小于800像素,因为你如果检查 – JavaEvgen
声明你的'。点击()'函数之外的'if'条件,然后'.trigger('点击')''。在if条件中单击()函数。 **例如:** https://jsfiddle.net/y35axgpg/10/ – UncaughtTypeError