js实现点击不是这个元素的任何地方,该元素实现隐藏

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

网站首页的搜索框,不用的时候是一个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>

赞(1) 打赏
未经允许不得转载:版权所有@七娃设计室七娃博客 » js实现点击不是这个元素的任何地方,该元素实现隐藏
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

七娃设计,让设计贴近生活

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏