实现点击空白处div消失 js + jquery 

// javascript 方法：

<html>

<body>

<a href="#" onmouseover="mouseover()">放上来</a>

<div style="display=" none" id="div">

不知道写什么

</div>

<script>

let div = document.getElementById("div");//获取到div的id

//第一步：鼠标移上去显示div

function mouseover() {

div.style.display = "block";

}

//第二步：点击空白处div消失

document.onclick = function () {

div.style.display = "none";

}

//第三步：点击自身div不消失

div.onclick = function (e) {

e.stopPropagation();//阻止事件冒泡

}

</script>


</body>

</html>

 

　　

// jquery方法
$(document).click(function () {
    $('.cityMenu').hide();
});

$(".cityChange").click(function (event) {
    event.stopPropagation();
    if ($(".cityMenu").is(':visible')) {
        $('.cityMenu').hide();
    } else {
        $('.cityMenu').show();
    }
});

　　

posted @ 2020-11-12 16:40  进击的丹子  阅读(494)  评论(0)    收藏  举报