Javascript JQuery只在一定宽度下工作

我正在做一个搜索栏覆盖，完成了，它应该像我提供的一样工作。但是JS只有在我登录WordPress或者我的窗口是588px时才能正常工作，然后它才能正常工作

单击搜索图标将打开网站

下面是我的JQuery代码（工作正常）：

---

问题是带有搜索图标的类分配。 删除行

class:col-mw-3

后，它在所有浏览器中运行良好。

---

还要确保

标签上没有任何内容

定义“只能正常工作”，到底什么不起作用？@rsn的意思是按预期工作。多么庞大的资源。。你能为上面使用的类和ID发布css吗？您是否尝试过隔离该函数，即创建一个空白的.html并仅使用该代码的基本功能？是的，请单击上面的

示例

。回顾一下，唯一不起作用的是

onClick

方法。它正在将搜索栏移动到背景的中心位置。但是，

onClick

方法在分辨率/innerWindow>855p之前不起作用。我不知道为什么它不起作用，代码不是非常优雅，但它应该能起作用，很抱歉，我帮不上什么忙。另一方面，我添加了一个

z-index:2

到您的

.mk全屏关闭

，因为这让我烦透了。另外，在

#mk全屏搜索输入中，我添加了
最大宽度：800px
和
宽度：80%
，以帮助响应。除此之外，我什么都没有，祝你好运！
//Created by Ryan Tarson, Please do not copy be original
jQuery(document).ready(function($) {
  var wHeight = window.innerHeight;
  console.log(wHeight);
  //search bar middle alignment
  $('#mk-fullscreen-searchform').css('top', wHeight / 2);
  //reform search bar
  jQuery(window).resize(function() {
    wHeight = window.innerHeight;
    $('#mk-fullscreen-searchform').css('top', wHeight / 2);
  });
  // Search
  $('#search-button').click(function() {
    console.log("Open Search, Search Centered");
    $("div.mk-fullscreen-search-overlay").addClass("mk-fullscreen-search-overlay-show");
  });
  $("a.mk-fullscreen-close").click(function() {
    console.log("Closed Search");
    $("div.mk-fullscreen-search-overlay").removeClass("mk-fullscreen-search-overlay-show");
  });
});