在css媒体查询开始后，Jquery脚本似乎停止工作

我这里有些问题

如果我运行脚本，当窗口宽度大于800px时，将加载菜单。然后我将窗口的大小调整到800px以下，用一个按钮将菜单调出。但是按钮不起作用。如果我将窗口的大小调整到800px以上，菜单会按原样再次出现

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

只有当窗口宽度低于800px时，jQuery部分才应该工作

我不知道为什么这不起作用

---

更新 谢谢你的帮助，显然我今天太累了，不应该在这个时间工作。你告诉我的，我早就知道了，但我需要朝正确的方向踢一脚

这就是我想到的：

---

jQuery

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

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

}

CSS

问题是“当脚本运行时”。脚本仅在加载页面时运行，而不在调整页面大小时运行。因此，在您的情况下，如果加载的页面大于800 px，事件侦听器将不会绑定到按钮

您可以通过删除if语句来修复此问题，因为我认为这没有用，这样事件侦听器将始终绑定到按钮

问题是“当脚本运行时”。脚本仅在加载页面时运行，而不在调整页面大小时运行。因此，在您的情况下，如果加载的页面大于800 px，事件侦听器将不会绑定到按钮

您可以通过删除if语句来修复此问题，因为我认为这没有用，这样事件侦听器将始终绑定到按钮

您的

.click（）

事件仅在条件评估为

true

时才被绑定-这仅在条件已为true的情况下才能在页面加载时发生-如屏幕大小低于

800px

声明您的

。在
if
条件之外单击（）

函数，使其始终绑定到该按钮。然后

.trigger（'click'）

在

if

条件下执行

.click（）

功能

例如：

$（“#菜单_按钮”）。单击（函数（）{
$（“#主菜单”）.toggle（）；
});
if（$（“#菜单按钮”）.css（“显示”）=“内联块”）{
$（“#菜单按钮”）。触发器（'单击'）
}

#主菜单{
边框：1px实心#000000；
宽度：100%；
高度：35px；
显示：块；
位置：绝对位置；
顶部：80px；
左：0；
}
#菜单按钮{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：800px）{
#主菜单{
显示：无；
宽度：200px；
身高：100%；
}
#菜单按钮{
显示：内联块；
}
}

菜单
[link]|[link]|[link]|[link]|[link]|[link]

您的

。单击（）

事件仅在条件评估为

true

时绑定-这仅在页面加载时发生，如果条件已为true-如屏幕大小低于

800px

声明您的

。在
if
条件之外单击（）

函数，使其始终绑定到该按钮。然后

.trigger（'click'）

在

if

条件下执行

.click（）

功能

例如：

$（“#菜单_按钮”）。单击（函数（）{
$（“#主菜单”）.toggle（）；
});
if（$（“#菜单按钮”）.css（“显示”）=“内联块”）{
$（“#菜单按钮”）。触发器（'单击'）
}

#主菜单{
边框：1px实心#000000；
宽度：100%；
高度：35px；
显示：块；
位置：绝对位置；
顶部：80px；
左：0；
}
#菜单按钮{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：800px）{
#主菜单{
显示：无；
宽度：200px；
身高：100%；
}
#菜单按钮{
显示：内联块；
}
}

菜单
[link]|[link]|[link]|[link]|[link]|[link]|[link]|[link]|[link]|[link]|[link]|[link]|[link]|[link]|[link]

当然，它只有在屏幕大小小于800px的情况下才起作用，因为你的if检查声明你的

。单击
if
条件外的函数，然后单击
。例如：当然，它只有在屏幕尺寸小于800px时才起作用，因为您的if复选框声明了您的
。单击
if
条件外的
函数，然后单击
。触发（'click'）
条件内的
。单击
if
条件内的
函数。例如：
#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;
    }

}