【问题标题】：Jquery script seem to stop working after css media query kicks in在 css 媒体查询启动后，Jquery 脚本似乎停止工作
【发布时间】：2017-10-28 19:16:57
【问题描述】：

我在这里遇到了一些问题。

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

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

jQuery 部分应该只在窗口宽度低于 800px 时工作。

我不确定为什么这不起作用？

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;
    }

}

【问题讨论】：

当然只有在屏幕尺寸小于 800 像素的情况下才有效，因为您的 if 检查
在if 条件之外声明您的.click() 函数，然后在if 条件中声明.trigger('click') .click() 函数。 例如： jsfiddle.net/y35axgpg/10

标签： jquery css media-queries

【解决方案1】：

您的 .click() 事件仅在条件评估为 true 时被绑定 - 这只能在页面加载时发生 IF 条件已经为 true - 比如当屏幕尺寸低于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>

【讨论】：

【解决方案2】：

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

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

【讨论】：