Javascript jQuery函数在$（窗口）后仍启动。调整大小

我有一个搜索表单，我希望它在桌面大小（992px+）上始终可见，在手机上用切换按钮隐藏。至关重要的是，我还希望在用户提交搜索表单后，表单可以折叠起来

除了将浏览器窗口从小于992px调整到大于992px时，上述所有功能都能正常工作，“提交”按钮仍然隐藏搜索表单，这是不应该发生的。无需调整大小，一切正常

这可以在中复制

这是我的密码：

提交后隐藏搜索表单

// Close search form on mobile when clicking search input
$(document).ready(function() {
  var $window = $(window);

  function checkWidth() {
    var windowsize = $window.width();

    if (windowsize < 992) {
      $('#search-form input').unbind().click(function() {
        $('#search-form').slideToggle(250).removeClass('open');
        $('a.search-toggle').removeClass('open');
      });
    }
  }
  // Execute on load
  checkWidth();
  // Bind event listener
  $(window).resize(checkWidth);
});

---

您不需要运行任何脚本来实现您想要实现的行为

以下是一个仅限于CSS的解决方案：

标签：悬停{ 光标：指针； } 输入[类型=复选框]{ 位置：绝对位置； 剪辑：rect（0,0,0,0）； } #搜索表{ 填充：20px； 背景颜色：灰色； 显示：无； /*默认情况下隐藏搜索表单*/ } /*这就是全部的魔力*/ 输入：选中+#搜索表单{ 显示：块； }

切换搜索

给你

//在手机上隐藏/显示搜索表单
$（文档）.ready（函数（）{
$（'a.search-toggle'）。单击（函数（事件）{
event.preventDefault（）；
$（this.toggleClass（'open'）；
$（“#搜索表单”）。幻灯片切换（250，函数（）{
$（“#搜索表单”）.toggleClass（'open'，$（this）.is（'：visible'）；
});
});
});
//单击搜索输入时关闭手机上的搜索表单
$（文档）.ready（函数（）{
变量$window=$（window）；
var inMobileMode=false；
var inDesktopMode=false；
函数checkWidth（）{
var windowsize=$window.width（）；
如果（WindowsSize<992&！inMobileMode）{
$（“#搜索表单输入”）。单击（函数（）{
$（“#搜索表单”）.slideToggle（250）.removeClass（'open'）；
$（'a.search-toggle'）.removeClass（'open'）；
});
inMobileMode=true；
inDesktopMode=false；
}else if（WindowsSize>=992&&！inDesktopMode）{
$（“#搜索表单输入”）.off（'click'）；
$（“#搜索表单”）.slideDown（250）.addClass（'open'）；
inDesktopMode=true；
inMobileMode=false；
}
}
//加载执行
检查宽度（）；
//绑定事件侦听器
$（窗口）。调整大小（选中宽度）；
});
正文{
背景：#fff；
}
#搜索表{
填充：30px；
背景：#eee；
}
@介质（最小宽度：992px）{
a、 搜索切换{
显示：无；
}
}

是否应为$（窗口）。调整大小（checkWidth（））；你为什么还要用JS来检查浏览器的大小？这只能通过使用媒体查询来实现…是的，媒体查询将是一个更简单的解决方案。简短回答：标签+复选框，并使用CSS中的同级选择器作为CSS唯一的解决方案。如果你愿意，我可以回答这个问题。我几乎总是使用媒体查询，尽管我可能遗漏了一些东西，因为我不认为在有人单击提交按钮后，你可以在CSS中隐藏一些东西？很好，尽管当你单击表单时，这似乎隐藏了表单，而不是提交按钮？@Stuart哦，对不起，我没有想到。。。多么失败的xD，我更新了我的示例来修复这个bug！
// Hide/show search form on mobile 
$(document).ready(function() {
  $('a.search-toggle').click(function(event) {
    event.preventDefault();
    $(this).toggleClass('open');
    $('#search-form').slideToggle(250, function() {
      $('#search-form').toggleClass('open', $(this).is(':visible'));
    });
  });
});