首页 > 在一个元素之外发生点击事件然后隐藏一个下拉菜单该怎么做?

在一个元素之外发生点击事件然后隐藏一个下拉菜单该怎么做?

不是mouseout这样的事件,是在一个元素之外发生点击事件,然后隐藏元素内的一个下拉菜单,效果就类似于在添加标签时,会出来一个提示的下拉菜单,然后在菜单之外点击就隐藏菜单,不知道应该怎样绑定事件呢?


if加入你的判断

window.onclick = function(e){
        e = e || window.event;
        var t = e.target || e.srcElement;
        if(t...){
            下拉菜单.style.display = "none"
        }
    }

需要将屏幕缩小:代码:响应式菜单制作
这个或许对你也有用:CSS3模拟侧滑菜单
一篇教程:响应式下的下拉菜单


给document绑定点击事件,直接隐藏菜单


  1. click 事件绑定到 ele 父元素(document.body)。
  2. 判断事件 event.target 和 event.currentTarget 是否相等。
  3. 如果相等,则是在 ele 元素之外(document.body) 触发,隐藏下拉菜单,不等则是 ele 元素触发。

用$element来表示你要隐藏的下拉菜单即$element = $('.need-hidden-element')
你添加下面的代码

$(document)
    .on('click', function(){
        $element.hide();
    })
    .on('click', '.need-hidden-element', function(event){
        event.stopPropagation();
    })

jq有个方法:trigger()

$('.div').click(function(){
    $('input').trigger('click');
});

做html5上传的时候用过这个方法,可惜不是原生js了,可以研究一下trigger()在jq里怎么作用的,

【热门文章】
【热门文章】