在引导导航栏中打开搜索框的搜索按钮答案

【问题标题】：search button to open search box in bootstrap navbar在引导导航栏中打开搜索框的搜索按钮
【发布时间】：2017-12-12 17:53:02
【问题描述】：

我想将搜索框添加到我的导航栏，但不像图片中显示的传统方式，我只想在导航栏中添加一个搜索图标按钮，当用户单击它时，搜索框会出现在搜索图标下方.

我该怎么做有人可以帮助我吗？

<nav class="navbar navbar-default" role="navigation">

  <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
  </div>
  <div class="collapse navbar-collapse" >
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Contact US</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Who we are <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">About</a></li>
      <li><a href="#"> Mession</a></li>
      <li><a href="#">  Vision</a></li>
      <li class="divider"></li>      
      <li><a href="#">Goals</a></li>
    </ul>
  </li>
  <li><a href="#">Publications</a></li>
  <li><a href="#">Media</a></li>
  <li><a href="#">Partners</a></li>
</ul>

【问题讨论】：

标签： twitter-bootstrap-3 menu navbar

【解决方案1】：

网上有很多东西，例如https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_anim_search

运行以下代码：

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('https://www.w3schools.com/howto/searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}
</style>
</head>
<body>

<p>Animated search form:</p>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

【讨论】：

【解决方案2】：

你可以试试这些sn-ps。

仅使用 CSS 的解决方案：

.hide
{
  opacity: 0;
  max-height: 0;
}

#trigger {
  position: absolute;
  left: -999em;
}

#container input[type="checkbox"]:checked + div
{
  max-height: 99em;
  opacity: 1;
  height: auto;
  overflow: hidden;
}

<div id="container">
	<label for="trigger">click me for Search</label>  
	<input type="checkbox" id="trigger">
  <div class="hide">
    <form>
        <input type="text" name="search" placeholder="Search..">
    </form>
  </div>
<div>

用JS解决：

function myFunction() {
	if (document.getElementById("form").style.display === "none") {
       document.getElementById("form").style.display = "block";
    } else {
        document.getElementById("form").style.display = "none";
    }
}

button {
width: 50px;
height: 50px;
}

<p>show and hide search</p>

<button  onclick="myFunction()"></button>
<form id="form">
  <input type="text" name="search" placeholder="Search..">
</form>

【讨论】：

根本不需要Javascript，应该可以使用完整的CSS解决方案。这是个坏主意。
我添加了一个纯 CSS 版本