javascript - 自定义搜索栏

Question

我想创建一个下拉搜索栏；类似于此博客上显示的搜索栏 http://www.theprivatelifeofagirl.com - 它出现在导航栏的右侧。本质上，我希望在现有图标旁边显示一个“搜索图标”，然后读者可以单击该图标，并使搜索栏出现在导航栏下方。

我尝试编写一个有点类似的搜索栏，但遇到了一些重大困难。问题之一是我无法使图标图像可见。我已将其编码在 html 中，但它不再出现在博客上。另一个问题是搜索栏不会“点击”出现，而是自动出现 - 即当您刷新页面时。

我的博客网址如下:http://www.blankesque.com

我已经包含了下面的 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>

Javacript 编码如下:

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

对于此事的任何意见将不胜感激。

Answer 1

在你的html中你需要添加一个图像标签

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

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

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

对于自动出现的搜索，您可以将显示更改为无。

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