在Materializecss/Material Design中通过点击图标展开可扩展搜索栏

Question

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

理想情况下，我希望它只占据整个页眉/顶部导航，但任何扩展/到搜索栏的内容都可以接受。

文档（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中是否有标准的方法可以做到这一点，而我不知道？

非常感谢。

- Trace DeCoy

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

});

- chwzr

---

我的意思是，就像SO顶部的新搜索栏一样工作。您单击它，它会展开。 - Trace DeCoy

如果你想在搜索栏展开时隐藏某些元素（这样在较小的屏幕上会更好看），请使用这个改进版：fiddle链接。 - chwzr

我非常感谢您的努力和付出，非常感谢。但是无论哪个版本，在单击展开和收缩时都有奇怪的行为。这似乎只发生在单击“X”（其框架的一部分）时。您知道是为什么吗？ - Trace DeCoy

你用什么浏览器？如果我点击搜索框，它会展开，但在导航栏下的页面主体区域内点击后，它就会按照预期缩小宽度。但是在我这里，当我点击展开后的X时，它没有缩小宽度。嗯，我会仔细查看框架中搜索栏的功能来解决这个问题。 - chwzr

在Firefox和Chrome中表现相同，尽管在Chrome中输入字段本身也缺少完整的高度，这会导致如果您单击搜索“字段”而不是实际的输入字段，则会出现相同的奇怪行为。它实际上会破坏页面并使其无法使用，因此需要刷新。我认为这不是您代码的问题，而是与Materialize冲突的问题。 - Trace DeCoy