【自定义下拉展开弹窗（仿select）】点击展开，下拉展示框

搬砖的小编

已于 2022-07-07 17:31:28 修改

阅读量720

点赞数

分类专栏： js JavaScript 文章标签： javascript 前端 html

于 2022-07-07 17:24:03 首次发布

本文链接：https://blog.csdn.net/weixin_46472377/article/details/125663059

版权

js 同时被 2 个专栏收录

13 篇文章

订阅专栏

JavaScript

10 篇文章

订阅专栏

场景需求

在这里插入图片描述

需要把一个hover的div改成点击事件

直接上代码，三步走

1.封装hover的div目标元素事件

var PclickName="" //弹窗,cbTargetName="" // 点击的元素
  function commOpenHover(dom,target){
            PclickName=dom;cbTargetName=target;
            if(!isClickPop){
                return;
            }
            //避免两个下拉同时出现
            if($(".hoverPop:visible").length==1&&!$(dom).is(':visible')){
                //关闭别人的弹窗
                    $(".hoverPop").slideUp(200);

                }
                //处理自己弹窗
               if( $(dom).is(':visible')){
                    $(dom).slideUp(200);
                }else{
                    $(dom).slideDown(200);
                }
        }

  //全局监听事件
        var timerClick= null,isClickPop= true;
         
        window.onclick = function(event) {
            if( !isClickPop){
                return;
            }
           if(timerClick){
               clearTimeout(timerClick)
           }
            timerClick=  setTimeout(function(){
             if($(PclickName).is(':visible')&&!matchesComm(event.target,cbTargetName)){
                        $(PclickName).hide();

                    }
               },200)
        };
        function matchesComm(target,doms){
            var res = false;
            if($(doms).length>0){
                for(var i=0;i<$(doms).length;i++){
                    $(doms)[i].contains(target);
                    if($(doms)[i].contains(target)){
                        res = true;
                    }
                }
                return res;
            }
        }

兼容ie用contains，不考虑ie的话用matches

  window.onclick = function(event) {
            if( !isClickPop){
                return;
            }
           if(timerClick){
               clearTimeout(timerClick)
           }
            timerClick=  setTimeout(function(){
            if($(PclickName).is(":visible")&&&& (!event.target.matches(cbTargetName)){
			    $(PclickName).hide();
		}
               },200)
        };

元素点击绑定

在这里插入图片描述

 PclickName="" //弹窗,cbTargetName="" // 点击的元素
 commOpenHover(PclickName,cbTargetName)

总结

如果遇到overflow 和 absolute 一起用的话，absolute 不能移除请勿踩坑！！