JSFiddle - React, Tailwind, and code Playground

by Sachin Patel

HTML

<ul class="treeView">
    <li level="1" id="1">
        <i class="CollOpen"></i><span>a 0</span><i class="MobileMenu"></i><ul class="CollList">
            <li level="2" id="551">
                <i class="CollOpen"></i><span>a 1</span><i class="MobileMenu"></i>
                <ul class="CollList">
                    <li level="3" id="553">
                        <i class="CollOpen"></i><span>a 1-1</span><i class="MobileMenu"></i>
                        <ul class="CollList">
                            <li level="4" id="556" class="lastChild"><span class="SpanChart">a 1-1-1</span><i class="MobileMenu"></i></li>
                        </ul>
                    </li>
                    <li level="3" id="554"><span class="SpanChart">a 1-2</span><i class="MobileMenu"></i></li>
                    <li level="3" id="555" class="lastChild"><span class="SpanChart">a 1-3</span><i class="MobileMenu"></i></li>
                </ul>
            </li>
            <li level="2" id="552" class="lastChild"><span class="SpanChart">a 2</span><i class="MobileMenu"></i></li>
        </ul>
    </li>
</ul>

CSS

.SelectedNode {
  background-color: yellow;
}

JavaScript

$(document).bind('contextmenu', function (e) {
            var target = $(e.target);
            if (target.is(".treeView li span")) {
                RightClick(target, e);
                return false;
            }
        });

    function RightClick(target, e) { 
    debugger;
    		$('.SelectedNode').removeClass('SelectedNode');
        target.addClass('SelectedNode');
    
    /*
    =========================================
    Below gives error as we don't have any reference
    =========================================
        menu.data('id', target.parent().attr('id'));
        menu.data('level', target.parent().attr('level'));
        $('#NodeTitle').text(target.text() + " - کد :" + target.parent().attr('id'));
    */
        e.preventDefault();
        $(".custom-menu").finish().toggle(100).
        css({
            top: e.pageY + "px",
            left: e.pageX + "px"
        });
    }