今天想实现这个一个功能：

网站首页的搜索框，不用的时候是一个icon的图标，用户点击的时候搜索框出现，用户不想搜索了就会点击其他的地方，这个时候搜索框需要复原，也就是搜索框隐藏和搜索icon显示。

html代码

<i class="seach_icon hide"></i>
				<div class="seachbox">
					<form action="" method="post">
						<input type="text" name="chats" id="chats" placeholder="请输入..." />
						<input type="submit" value="搜索"/>
					</form>
				</div>

js代码：

<script type="text/javascript">
					$(function(){
						 $(document).click(function () {
						        $(".seachbox").hide();
						        $(".seach_icon").show();
						 });
						  $(".seach_icon").on("click", function (event) {
						        //取消事件冒泡
						      var e = arguments.callee.caller.arguments[0] || event; //若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容
						      if (e && e.stopPropagation) {
						           // this code is for Mozilla and Opera
						           $(this).hide();
							$(".seachbox").show();
						          e.stopPropagation();
						      } else if (window.event) {
						        // this code is for IE
						        $(this).hide();
							$(".seachbox").show();
						          window.event.cancelBubble = true;
						    }
						});
					})
</script>

原文地址：https://course.51qux.com/169.html