我真是实在想不到这个标题应该怎么写，如果你一下子并不能理解。你可以看看我这个网站的搜索框。
个人网站
搜索框在网站的右侧，一开始搜索框是这样的。
初始搜索框样式
在点击搜索图标的时候，搜索框会变成这样。
点击之后
在之后，如果你需要这个搜索框变成原来的样式，只显示一个个图标。你不需要再点击这个搜索的图标，只要点击这个网站里除了这个图标和输入框的其它内容就可以。
要实现这个功能，我们就需要用到js的点击冒泡机制。这个机制等下我再来介绍，先来看看代码。
<div class="searchbox"> <div class="page-header-search"></div> <div class="page-header-search-input" contenteditable="true"></div> </div>这是html代码，具体的样式我就不贴出来了，想看样式可以在上面那个网站里通过审查元素来看。最外面那个div就是整体的一个容器，里面第一个div是搜索框的图标，第二个div是后面可以输入框。
searchclick:function () { $(".page-header-search").click(function(){ $(".searchbox").css("left","0px"); $(document).click(function(){ $(".searchbox").css("left","210px"); }); event.stopPropagation(); }); $(".page-header-search-input").click(function(){ event.stopPropagation(); }); }这是js代码，其实就是两个点击事件而已。我们先设置搜索图标的点击事件，对于css样式的修改我就不解释了。$(document).click(function(){}就是对document设置一个点击事件，这个事件里的就是搜索框的隐藏函数。
下面重点解释一下event.stopPropagation()和点击事件的冒泡机制。
像我们平时用的js添加点击事件ele.onclick=function(){}都是采用的事件冒泡方式。在点击之后，会从一层一层往上冒泡。冒泡顺序基本为div -> body -> html -> document（个别浏览器可能还会有其他内容）。event.stopPropagation()这个函数的作用就是停止当前的冒泡事件。
大概介绍完了，我们再来理理这个函数的运行原理。我们在点击图标的时候触发这个点击事件，然后添加了一个document的点击事件，让我们可以点击其它内容来隐藏搜索框。但是我们在点击搜索框之后，因为点击事件是冒泡的，它最后会冒泡到document这一层会触发这个隐藏的函数。所以我们需要停止冒泡事件。
$(".page-header-search-input").click(function(){ });这个点击函数是防止我们在点击输入框的时候产生的点击事件冒泡上去从而触发搜索框隐藏的事件。
