JSFiddle - React, Tailwind, and code Playground

by htmlzengarden

JavaScript

var nav = function(selector){

    var active = 'active';
    
    var behaviours = function(selector){
        
        var close = function(selector){
        
            $(selector).find('ul:first').children('li').removeClass(active);
        };
        
        var menuclick = function(selector){
        
            $(document).on('click', function(){
            
                close(selector);
            });
            
            $(selector).find('ul').find('ul').on('click', function(e){
                
                e.stopPropagation();
            });
        
            $(selector).find('ul:first').children('li').children('a').on('click', function(e){
            
                var that = $(this);
            
                e.stopPropagation();

//                that.blur();
                
                if(that.parent('li').find('ul').length)
                {
                    e.preventDefault();
                    
                    if($(selector).find('ul:first').children('li').children('a').not(this).parent('li').hasClass(active))
                    {
                        close(selector);
                    }
                    that.parent('li').toggleClass(active);
                }
            });
        };
        
        var menuhover = function(selector){
        
            $(selector).find('ul:first').children('li').hover(function(){
                
                if($(this).find('ul').length)
                {
                    close(selector);
                    $(this).addClass(active);
                }
            }, function(){
            
                close(selector);
            });
        };
        
        menuclick(selector);
//        menuhover(selector);
    };

    var init = function(selector){
                            
        behaviours(selector);
    };
    
    init(selector);
};