通過在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改善擴大導航欄搜索:)（無鉻不受歡迎的行爲）

沒關係，因爲他想要別的東西，因爲我鑫卡特第一個版本，看看在這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'); 
    }); 

});