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

Posted 2023-02-22

【中文标题】通过单击 Materializecss/Material Design 中的图标可扩展搜索栏

【英文标题】：Expandable search bar by clicking icon in Materializecss/Material Design

【发布时间】：2016-10-25 23:35:00

【问题描述】：

使用 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 中是否有执行此操作的标准方法？

非常感谢

【参考方案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');
  );

);

【讨论】：

我的意思是，与 SO 作品顶部的新搜索栏非常相似。你点击它，它就会展开。

我添加了你想要的:) jquery 没问题 :)

如果您想在搜索栏展开时隐藏某些元素（在较小的屏幕上看起来会更好），请使用此改进版本：fiddle link

感谢您的努力，谢谢，但是当您单击展开和收缩时，两个版本都有奇怪的行为。似乎只有在单击“X”时（他们框架的一部分）。你知道为什么吗？

您使用哪种浏览器？如果我在搜索中单击它会展开，当我单击页面正文（在导航栏下）时，它会减小宽度为wantend。但是在我的情况下，当我在展开它后单击 x 时它不会减小宽度.. 嗯，将仔细研究框架的搜索栏功能来解决它​​。