更新

Question

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

如果我运行脚本，当窗口宽度超过800px时，菜单会加载。然后我调整800px以下的窗口大小，菜单换成了一个按钮。但按钮不起作用。如果我将窗口调整到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;
    }

}

Answer 1

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

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

Answer 2

当条件评估为.click()时，true事件才被绑定 - 这只能在页面加载时发生 IF 条件已经 true - 例如当屏幕尺寸低于800px时。

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

E.g： https://jsfiddle.net/y35axgpg/10/

＆＃13;

$("#menu_button").click(function() {
  $("#main_menu").toggle();
});

if ($("#menu_button").css("display") == "inline-block") {

  $("#menu_button").trigger('click')

}

＆＃13;

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

＆＃13;

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

＆＃13;

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

更新

2 个答案: