【Javascript】【jQuery】统一为自动悬浮框添加事件

运行效果 html代码

    
        
        jQuery
    

    
    
    

    
        

            

                Items
                

                    
Item-1
                    
Item-2
                    
Item-3
                    
Item-4
                    
Item-5
                
            

            

                Items
                

                    
Item-1
                    
Item-2
                    
Item-3
                    
Item-4
                    
Item-5
                
            

            

                Items
                

                    
Item-1
                    
Item-2
                    
Item-3
                    
Item-4
                    
Item-5
                
            
        
    

js代码

$(() => {
    //悬浮框id规定为父容器id加上-pop，利用这个规则，就可以统一为悬浮框添加事件
    $(".pop-parent").hover(function () {
        let popChildSelector = "#" + this.id + "-pop";
        $(popChildSelector).show();
    }, function () {
        let popChildSelector = "#" + this.id + "-pop";
        $(popChildSelector).hide();
    });

    //给item按钮添加点击事件，每个id对应一个事件处理器（方法）
    let eventHandlers = new Map();
    eventHandlers.set("item-1", () => alert("Item-1 Click"));
    eventHandlers.set("item-2", () => alert("Item-2 Click"));
    //为每个item设置共通的点击事件，如点击后隐藏父容器
    $("#menu>ul>div>li").click(function () {
        $(this).parent().hide();
        eventHandlers.get(this.id)();
    });
});

css代码

* {
    padding: 0;
    margin: 0;
}

#menu {
    font-size: 0px;
}

#menu > ul {
    width: 100px;
    display: inline-block;
    margin-right: 1px;
}

#menu > ul > a {
    display: inline-block;
    width: 100%;
    background: deepskyblue;
    text-align: center;
    font-size: 16px;
    color: white;
    line-height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    -webkit-user-select: none;
    cursor: pointer;
}

#menu > ul > a:hover {
    background: dodgerblue;
}

#menu > ul > div {
    position: relative;
    float: left;
    top: 1px;
    display: none;
}

#menu > ul > div > li {
    width: 100%;
    background: deepskyblue;
    font-size: 16px;
    list-style: none;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 1px;
    display: inline-block;
    text-align: center;
    color: white;
    -webkit-user-select: none;
    cursor: pointer;
}

#menu > ul > div > li:hover {
    background: dodgerblue;
}