javascript - CSS/JS - 响应式搜索

Question

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

当窗口大小 <= 420px 时，此搜索框输入字段将被隐藏。并在点击搜索图标时触发打开。

试图解密页面上的javascript代码，我也试图找到类似的教程，但我只能找到这个:http://tympanus.net/Tutorials/ExpandingSearchBar/这真的不一样。

很高兴有人能指出我正确的方向:)

Answer 1

在 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');
  });
}

input-visible 类应该有 display: block 或 inline-block，以及其他所需的样式，如位置、大小等。希望这对您有所帮助!