搜索按钮以在引导导航栏中打开搜索框

user 发表于 Dev

用户

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

任何人都可以帮助我，我该怎么做？

<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>

多数24

您可以尝试这些片段。

仅使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。