JSFiddle - React, Tailwind, and code Playground

by qustosh

HTML

<div id="menu">
    wlacz
</div>
<div id="submenu">
wylacz
</div>
<div id="viewarea">
    <ul>
        <li>One</li>
                <li>Two</li>
                <li>Three</li>
                <li>Four</li>
                <li>Five</li>
    </ul>
</div>

CSS

#menu{background-color:green}
#submenu{background-color:red}

JavaScript

//EVENTS UNBINDING WITH OFF 
;(function(d){
    var cache = {};

    d.publish = function(/* String */topic, /* Array? */args){
        cache[topic] && d.each(cache[topic], function(){
            this.apply(d, args || []);
        });
    };

    d.subscribe = function(/* String */topic, /* Function */callback){
        if(!cache[topic]){
            cache[topic] = [];
        }
        cache[topic].push(callback);
        return [topic, callback]; // Array
    };

    d.unsubscribe = function(/* Array */handle){
        
        var t = handle[0];
        cache[t] && d.each(cache[t], function(idx){
            if(this == handle[1]){
                cache[t].splice(idx, 1);
            }
        });
    };

})(jQuery);//PUBEND

menu = $("#menu");
submenu = $("#submenu");
viewarea = $("#viewarea");


submenu.on("click",function(e){

    $.publish("clickSubmenu",[e])
});

menu.on("click",function(e){

    $.publish("clickMenu",[e])
});

function add(){
viewarea.on("click","li",function(e){
    //console.log("yesy csdcvs");
    
    if($(this).data("clicked") === true){
       $(this).data("clicked", false)
       $(this).css({color:"black"});
    }else{
        $(this).data("clicked", true)
        $(this).css({color:"green"});
    }
})
}
$.subscribe("clickSubmenu",function(e){
    //console.log(e.curentTarget);
    viewarea.off("click")
})
    
$.subscribe("clickMenu",function(e){
    //console.log(e.curentTarget);
    add()
})