javascript - 下拉菜单点击事件

大家讲道理    2017-04-11 12:54:446楼

点击菜单时候给菜单加个clicked标记，body监听到click事件时关闭菜单并且清除菜单按钮的clicked标记

 赞 +0添加回复

小葫芦    2017-04-11 12:54:445楼

$(document).bind("click",function(e){
      var target  = $(e.target);
      if(target.closest(".menu").length == 0){//menu:菜单最子层class
        $(".header-menu").hide();
      }
}

$(document).bind('click', function(e) {
  var e = e || window.event;
  var elem = e.target || e.srcElement;
  while (elem) {
    //循环判断至跟节点，防止点击的是p子元素
    if (elem.id && elem.id == 'menu') {
      return;
    }
    elem = elem.parentNode;
  }
  //点击的不是p或其子元素
  $('.menuList,.overlay').hide();
});

 赞 +0添加回复

天蓬老师    2017-04-11 12:54:444楼

其实我的理解就是一个元素获取的问题，你给菜单按钮绑定了一个下拉显示的事件，给除去它之外的元素一个关闭下拉菜单的事件绑定就可以了。我看楼主的项目，下拉菜单是一个模态框吧？给他的外层容器元素一个点击关闭事件就是你想要的了

 赞 +0添加回复

PHPzhong    2017-04-11 12:54:443楼

在你html页面最下面加上下面的代码，测试可以

<script>
    document.body.onclick=function(){
      $('.navbar-collapse').collapse('hide')

    }
</script>

 赞 +0添加回复

大家讲道理    2017-04-11 12:54:442楼

$(document).on('click', function(e){
  var $el = $('.navbar-collapse');
  if ($el[0] !== e.target && !$.contains($el[0], e.target)) {
    $el.hide();
  }
});

 赞 +0添加回复

ringa_lee    2017-04-11 12:54:441楼

$("body").click(function(){

菜单隐藏;
return flase;
//用来清除冒泡

})

 赞 +0添加回复