点击弹出层外的部分弹出层消失的几种写法

最新推荐文章于 2021-08-25 16:12:08 发布

weixin_30672295

最新推荐文章于 2021-08-25 16:12:08 发布

阅读量87

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ToBeBest/p/5817273.html

本文介绍了一种使用jQuery实现的下拉菜单交互效果，包括点击展开与收起菜单、阻止事件冒泡以及通过不同方式隐藏菜单的功能。

$(".dropdown-text,.dropdown-content-blue").click(function (e) {
     $(".dropdown-text").removeClass("active");
     $(".dropdown-text").addClass("active");
     $(".dropdown-content-blue").show();
     e.stopPropagation();//阻止冒泡
});
//写法一
$(document).click(function (e) {
    $(".dropdown-text").removeClass("active");
    $(".dropdown-content-blue").hide();
    e.stopPropagation();
});
//写法二
$(document).click(function (e) {
　　if(!$(e.target).hasClass("dropdown-content-blue")){
　　　　$(".dropdown-text").removeClass("active");
       $(".dropdown-content-blue").hide();
　　}
});
//写法三
$(document).click(function (e) {
　　if(!$(e.target).closest(".dropdown-content-blue").length){
　　$(".dropdown-text").removeClass("active");
        $(".dropdown-content-blue").hide();
　　}
});