CSS / JS - 响应式搜索

Question

我想创建一个响应式搜索框，类似于http://www.hightimes.com/的搜索框。

当窗口大小为＆lt; = 420px时，将隐藏此搜索框输入字段。并且在单击serach图标时触发打开。

尝试解密页面上的javascript代码，我也试图找到类似的教程，但我能找到的就是这一个：http://tympanus.net/Tutorials/ExpandingSearchBar/ 它实际上并不相同。

如果有人能指出我正确的方向，我很高兴：）

Answer 1

使用css @media_query，检测屏幕最大宽度是否为420像素，然后在媒体查询中隐藏文本框，如.textbox {display：none}。

使用javascript在按钮onclick上附加事件处理程序以隐藏和显示文本框。

将文本框默认样式放在media_query之外，这样样式只有在屏幕大小为＆lt; = 420时才会生效。

Answer 2

你应该得到窗户的宽度。如果你使用jQuery，它将非常容易。 为您的搜索字段提供ID并使用jQuery显示/隐藏它。例如：

// in your js
if ($(window).width() < 420) {
   $("#searchField").hide("fast");
}
else {
   $("#searchField").show("fast");
}

    <!-- in your template -->
<input id="searchField" type="search" />

Answer 3

在CSS中写道：

@media-screen and (max-width: 420px){
  .search-box {
    display: none;
  }
}

如果你正在使用JQuery写：

if($(window).width()<420){
  $('.search-icon').click(function() {
    $('.search-box').toggleClass('input-visible');
  });
}

输入可见类应该具有display：block或inline-block，以及其他所需的样式，如位置，大小等。希望这会有所帮助！