QQ 1640076782
通常情况下，外贸网站中的搜索功能都是由搜索框各一个搜索按钮组成，我们做的最多的就是给搜索框或按钮一个不同的CSS样式，让其与整个网站的风格匹配。便有时候为了让网站整体风格匹配，默认情况下会将搜索框隐藏，只出现搜索按钮，在浏览者需要搜索的时候搜索框才会出现，那么这样的功能该如何实现呢，下面我们来看看实现这个效果的方法，当然Jquery是肯定会用到的：
默认情况下搜索框和搜索按钮肯定都是必不可少的：
<div>
<div id=”sb-search”>
<form>
<input placeholder=”Enter your search term…” type=”text” value=”" name=”search” id=”search”>
<input type=”submit” value=”">
<span></span>
</form>
</div>
</div>
此外我们还需要引入三个JS
<script src=”js/modernizr.custom.js”></script>
<script src=”js/classie.js”></script>
<script src=”js/uisearch.js”></script>
至于JS里面具体的内容可以直接在网上搜索相关JS即可
最后就是调用了：<script>
new UISearch( document.getElementById( ‘sb-search’ ) );
</script>
默认效果：
点击搜索按钮之后的效果：
如果你有更好的方法，欢迎留言分享！
xueposter@gmail.com