jquery - 点击后搜索栏

Question

我正在尝试在导航菜单旁边放置一个搜索按钮，单击该按钮时会弹出导航菜单下方的搜索栏。基本上会像下面的图片：

正常状态

点击后

是否有任何教程可以帮助我实现这一目标？谢谢！

Answer 1

尝试这个：

JS：

$(document).ready(function(){
  $ ("#searchForm"). hide ();
  $("#searchButton").click(function(){
       $("#searchForm").show();
  }); 
});

HTML： <form id="searchForm">myForm</form> <input type="submit" id="searchButton"/>

Answer 2

你可以只用 CSS 来做到这一点。

我个人会position: relative在菜单上使用，然后position: absolute在搜索栏上使用。放置right: 10px和bottom: -100px（将像素更改为搜索栏的高度）。搜索栏 HTML 应位于菜单内。

---

总而言之，您将在菜单中添加以下 css：

position: relative;

到搜索栏，您将添加以下 css：

position: absolute;
right: 10px;
bottom: -100px;

100px搜索栏的高度在哪里。