我爱模板网 > 建站教程 > JS、jQ、TS >  鼠标点击空白处二级菜单隐藏,js防止事件冒泡正文

鼠标点击空白处二级菜单隐藏,js防止事件冒泡

我爱模板网今天在给一个广东的客户做网站时,需要实现一个效果,就是点击空白的地方,菜单隐藏。先看下效果图:
二级菜单
二级菜单
点击“我爱模板网”,显示下面的ul,再点击空白的地方,ul隐藏。一开始js代码如下:
  $("span").click(function(event){
      $(this).next().show();
  })

  $(document).click(function(){
    $("ul").hide();
  })

})
可是这种方法导致点击span没有效果。因为下面的span包含在document中。这就涉及到事件冒泡,即:点击span的时候,适可而止,不能再向下点击到了document。在点击span的时候,阻止事件冒泡即可:
  $("span").click(function(event){
      //防止事件冒泡
      event = event||window.event;
      event.stopPropagation();
      $(this).next().show();
  })

  $(document).click(function(){
    $("ul").hide();
  })
完整代码如下,您可以运行代码,点击试试:


提示:您可以先修改部分代码再运行




部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:将网页标题和网址复制到剪贴板js代码 下一篇:jQuery定义的函数用js调用,jquery函数用onclick调用方法
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢