js实现点击不是这个元素的任何地方,该元素实现隐藏
七娃博客343 次
今天想实现这个一个功能:
网站首页的搜索框,不用的时候是一个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>
评论 | 0 条评论
登录之后才可留言,前往登录