Javascript 自定义搜索栏

我想创建一个下拉搜索栏；一个类似于此博客上显示的搜索栏-它出现在导航栏的右侧。基本上，我希望“搜索图标”与现有图标一起可见，然后读者可以单击该图标，搜索栏将显示在导航栏下方

我曾尝试编写一个类似的搜索栏，但遇到了一些主要困难。问题之一是我无法使图标图像可见。我有它的html编码，但它不再出现在博客上。另一个问题是，搜索栏不会在“单击”时显示，而是在刷新页面时自动显示

我的博客的URL如下所示：

<div id='top-search'>
  <a href='#'><i class='search'/></a>
</div>
<div class='show-search'>
  <form action='/search' id='searchform' method='get' role='search'>
    <div>
      <input id='s' name='q' placeholder='Search' type='text'/>
    </div>
  </form></div>

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($) {
"use strict";
$('#top-search a').on('click', function(e) {
e.preventDefault();
$('.show-search').slideToggle('fast');
});
});
//]]></script>

我已将css编码包括在下面：

.show-search {
position: absolute;
top: 55px;
right: 95px;
display: block;
z-index: 10000;
}

.show-search #searchform input#s {
width: 150px;
background: #f5f5f5;
border: 1px solid #f0f0f0;
text-decoration: none;
font-family: karla, arial;
font-weight: normal;
font-size: 10.9px;
color: #494949;
text-transform: uppercase;
letter-spacing: 0.09em;
padding: 7px;
}
.show-search #searchform input#s:focus {
border: 1px solid #cccccc;
}
#top-search {
position:absolute;
right:0;
top:0;
width:80px;
text-align:center;
margin-left:0px;
}
#top-search a {
height:50px;
font-size:14px;
line-height:50px;
color:#343434;
border-left: 1px solid #f0f0f0;
display:block;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.search input#s {
border: 1px solid #e5e5e5;
background: #fff url(http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/829C0943-C2A2-4052-BFF5-49E6606F44B6_zps3r9lpyvb.gif) no-repeat 96% 13px;
padding: 0;
font-size:11px;
color:#999;
letter-spacing:1px;
}
#searchform #s:focus { outline:none; }

HTML编码如下所示：

<div id='top-search'>
  <a href='#'><i class='search'/></a>
</div>
<div class='show-search'>
  <form action='/search' id='searchform' method='get' role='search'>
    <div>
      <input id='s' name='q' placeholder='Search' type='text'/>
    </div>
  </form></div>

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($) {
"use strict";
$('#top-search a').on('click', function(e) {
e.preventDefault();
$('.show-search').slideToggle('fast');
});
});
//]]></script>

JavaScript编码如下所示：

<div id='top-search'>
  <a href='#'><i class='search'/></a>
</div>
<div class='show-search'>
  <form action='/search' id='searchform' method='get' role='search'>
    <div>
      <input id='s' name='q' placeholder='Search' type='text'/>
    </div>
  </form></div>

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($) {
"use strict";
$('#top-search a').on('click', function(e) {
e.preventDefault();
$('.show-search').slideToggle('fast');
});
});
//]]></script>

//

---

对此问题的任何意见都将不胜感激

在html中，您需要添加图像标记

<div id='top-search'>
<a href='#'>

//Need to an img here
<img src="url to image">

<i class='search'/>
</a>
</div>

---

在html中，您需要添加一个图像标记

<div id='top-search'>
<a href='#'>

//Need to an img here
<img src="url to image">

<i class='search'/>
</a>
</div>