jQuery - 调整屏幕大小时 div 不关闭

Question

我有这段代码，当点击搜索图标时会显示 Hello-World div。我希望这仅在screen size is < 768px 时发生。

我面临的问题是，当screen is > 768px，如果在screen size < 768px 中第一次打开 div 时，div 不会隐藏，而不是在调整屏幕大小之前关闭。

$(document).ready(function() {
  $('#showsearch').click(function() {
    $('.input-display').slideToggle("fast");
  });
});

查看我的jsfiddle，打开 div，不要关闭，然后调整屏幕大小！

我怎样才能防止这种情况发生？

Answer 1

由于您使用 JavaScript 显示/隐藏 div，因此您必须在 css 中使用 !important 来覆盖 JavaScript 添加的内联样式 (display: block;)。试试这个：

.input-visible {
  display: none !important;
}