通過單擊Materialisecss / 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>

怎么辦呢？ 在Materialisecss / Material Design中我是否有一種標准方法可以做到這一點我不知道？

非常感謝

Answer 1

編輯：看看更新的小提琴改進版本的擴展導航欄搜索:)（在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');
  });

});