JS to realize the right-click menu bar function

1. design sketch ：

Mouse hover ：

2. Code

（1）html

<div class="leftDiv">
	<!-- Right click div-->
	 <div id="rightClickDiv">
	       <ul id="rightClickUl">
	           <li class="createLi rightClickLi liHover"><span class="liContent createSpan"> New folder </span></li>
	           <li class="addProduct rightClickLi liHover"><span class="liContent addProductSpan"> Add product </span></li>
	           <li class="addWp rightClickLi liHover"><span class="liContent addWpSpan"> Add type </span></li>
	           <li class="addPg rightClickLi liHover"><span class="liContent addPgSpan"> Add code </span></li>
	           <hr class="splitLine" />
	           <li class="deleteLi rightClickLi liHover"><span class="liContent deleteSpan"> Delete </span></li>
	           <li class="renameLi rightClickLi liHover"><span class="liContent renameSpan"> rename </span></li>
	       </ul>
	 </div>
 </div>

（2）css

#rightClickDiv{
    
    display: none;
    position: absolute;
    float: left;
    width: 9.5vw;
    height: 25vh;
    border: 1px solid #d8d8d8;
    box-shadow:3px 3px 5px #dadada;
    z-index: 10001;
    background-color: white;
}

ul#rightClickUl {
    
    position: relative;
    width: 100%;
    height: 96%;
    top: 2%;
    font-size: 0.77vw;
    color: #525252;
    cursor: default;
}

#rightClickUl> li{
    
    position: relative;
    margin-top: 2%;
    height: 3vh;
    font-size: 0.77vw;
    line-height: 1.5vw;
}

.liHover:hover{
    
	/* Mouse hover style */
    background-color: #e1e1e1;
}
.dLi{
     
    /* The file color changes when access is prohibited */
    color: #bababa;
}

.liContent{
    
    position: relative;
    left: 21%;
}

（3）js

/** *  Disable right mouse button  */
    $('.leftDiv').on('contextmenu', function () {
    
        return false;
    });

    /** *  Target area click event  */
    $('.leftDiv').on('mousedown', function (event) {
    
        var code = event.which;
        switch (code) {
    
            case 1: 
            	//  left-click 
                console.log(event);

                //  Judge sub elements 
                if (event.target.className.indexOf('addProductSpan') >-1 || event.target.className.indexOf('addProduct')>-1) {
    
                    //  Add product 
                    console.log(" Add product ");

                } else if (event.target.className.indexOf('addWpSpan') >-1 || event.target.className.indexOf('addWp')>-1){
    
                    //  Add part 
                    console.log(" Add part ");
                } else if (event.target.className.indexOf('addPgSpan') >-1 || event.target.className.indexOf('addPg')>-1){
    
                    //  Add program 
                    console.log(" Add program ");
                } else if (event.target.className.indexOf('createLi') >-1 || event.target.className.indexOf('createSpan')>-1) {
    
                    //  Add folder 
                    console.log(" Add folder ");
                } else if (event.target.className.indexOf('deleteLi') >-1 || event.target.className.indexOf('deleteSpan')>-1){
    
                    //  Delete 
                    if (!$(".deleteLi").hasClass('dLi')){
    
                        console.log(" Delete ");
                    }

                } else if (event.target.className.indexOf('renameLi') >-1 || event.target.className.indexOf('renameSpan')>-1){
    
                    //  rename 
                    if (!$(".renameLi").hasClass('dLi')){
    
                        console.log(" rename ");
                    }

                } else if (event.target.className.indexOf('ztree') > -1){
    
                    $('#rightClickDiv').hide();
                }

                break;
            case 2: mouse = " In the key ( Roller )";
                break;
            case 3: mouse = " Right click ";
                //  Click on the blank space 
                console.log(event);

                if (event.target.className.indexOf("ztree")>-1){
    
                    //  Change content   Click on the blank page 
                    $("#rightClickUl>li:not(.createLi)").removeClass("liHover").addClass("dLi");
                } else if (event.target.className.indexOf("ico_docu")>-1 || event.target.className.indexOf("node_name") > -1){
    
                    //  Change content   Click product package 
                    $(".addProduct").addClass("liHover").removeClass("dLi");
                    $("#rightClickUl>li:not(.addProduct)").removeClass("liHover").addClass("dLi");
                }
                var x = event.offsetX;
                var y = event.offsetY;
                //  If the click position is div On the right side , Adjust the display position 
                if (event.offsetX + $("#rightClickDiv").width() > $(this)[0].clientWidth) {
    
                    x =  $(this)[0].clientWidth - $("#rightClickDiv").width();
                }
                if (event.offsetY + $("#rightClickDiv").height() > $(this)[0].clientHeight) {
    
                    y = $(this)[0].clientHeight - $("#rightClickDiv").height();
                }

                // Change the position of the menu to the position of the event 
                $('#rightClickDiv').css({
    'top': y,'left': x,'display': 'block'});
                break;
            default: break;
        }
    })