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

Question

在使用 Materializecss 进行布局时，我需要在我的页眉/导航栏中显示一个搜索图标，单击该图标会展开搜索栏。

理想情况下，我希望它接管整个标题/topnav，但任何扩展/扩展到搜索栏的内容都可以。

除了提及基本代码外，文档 ( http://materializecss.com/navbar.html) 没有详细说明搜索栏:

  <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>

如何解决这个问题？在我不知道的 Materializecss/Material Design 中是否有执行此操作的标准方法？

非常感谢

Answer 1

编辑:查看更新的 fiddle用于扩展导航栏搜索的改进版本:)(在 chrome 中没有不需要的行为)

好吧，因为他想要我首先想到的其他东西，看看这个 fiddle .需要一些基本的 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');
  });

});