Javascript 通过单击Materializecss/Material Design中的图标可扩展搜索栏

使用Materializecss处理布局，在我的标题/nav中，我需要显示一个搜索图标，当单击该图标时，会展开搜索栏

理想情况下，我希望它只接管整个header/topnav，但任何将/扩展到搜索栏的操作都可以

除了提到基本代码外，文档（）没有详细说明搜索栏：

  <nav>
    <div class="nav-wrapper">
      <form>
        <div class="input-field">
          <input id="search" type="search" required>
          <label for="search"><i class="material-icons">search</i></label>
          <i class="material-icons">close</i>
        </div>
      </form>
    </div>
  </nav>

搜索
关闭

你怎么办？在我不知道的物化ECS/材料设计中，有没有标准的方法来实现这一点

---

非常感谢

编辑：查看扩展导航栏搜索的升级版本：）（在chrome中没有不需要的行为）

好吧，既然他想要我想的其他东西，看看这个。 需要一些基本的jquery函数：

$(document).ready(function() {
var trig = 1;

  //animate searchbar width increase to  +150%
  $('#navbarsearch').click(function(e) {

   if (trig == 1){
      $('#expandtrigger').animate({
        width: '+=150'
      }, 400);
     trig ++; 
     }
    //handle other nav elements visibility here  
    $('.search-hide').addClass('hide');
  });

  // if user leaves the form the width will go back to original state

  $("#navbarsearch").focusout(function() {
    $('#expandtrigger').animate({
      width: '-=150'
    }, 400);
    trig = trig - 1;
    //handle other nav elements visibility here
        $('.search-hide').removeClass('hide');
  });

});

---

我的意思是，非常像顶部的新搜索栏，所以很有效。你点击它，它就会展开。我添加了你想要的：）jquery没有问题：）如果你想在搜索栏展开时隐藏一些元素（在smaler屏幕上看起来会更好），请使用这个改进的版本：我感谢你的努力，谢谢，但当你点击展开和收缩时，这两个版本都有奇怪的行为。它似乎只有在单击“X”时才出现（它们框架的一部分）。你知道为什么吗？你使用哪种浏览器？如果我在搜索中单击，它会展开，当我在页面正文（导航栏下）中单击时，它会随着时间的推移而减小宽度。但在我看来，当我在展开x后单击x时，它不会缩小宽度。。嗯，我们将仔细研究一下框架的搜索栏功能来解决这个问题。