JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<li class="parent">
    I'm a parent
    <ul>
        <li class="child"><a href="http://jsfiddle.net/baktash93/kpyqszbg/">I'm a child</a></li>
    <li class="parent">
        I'm a parent
        <ul class="child">
            <li><a href="http://jsfiddle.net/baktash93/kpyqszbg/">I'm another child</a></li>
        </ul>
    </li>
    </ul>
</li>

CSS

.parent{
    max-width: 100%;
    position:relative;
    padding: 2rem;
    background:e3e3e3;
    border: 2px solid green;
}

.child{
    width: 40%;
    height: 60px;
    background: pink;
    border: 1px solid gray;
}

JavaScript

$(function(){
	$('.parent').click(function(){
    	alert('I have the right to raise the event, cause I\'m a parent!');
    });
    
    $('.child a').click(function(){
        //any operation the child may do can be added here
        window.location = $(this).attr('href');
        console.log($(this).attr('href'));
    	return false;
    });
});