JSFiddle - React, Tailwind, and code Playground

by edemdrummer

HTML

<div id="navcontainer">
    <ul>
        <li><a href="#">Milk</a>

            <ul>
                <li><a href="#">Goat</a>

                </li>
                <li><a href="#">Cow</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Eggs</a>

            <ul>
                <li><a href="#">Free-range</a>

                </li>
                <li><a href="#">Other</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Cheese</a>

            <ul>
                <li><a href="#">Smelly</a>

                </li>
                <li><a href="#">Extra smelly</a>

                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

ul, li {
    list-style-type: circle;
}

.test{
    color: 089fd2;
}

JavaScript

function handler(event) {
    var targeter = $(event.target);
    if (targeter.is("a")) {
        if(targeter.parents().length){
            //alert("this is a ");
            $(this).parents().addClass("test");
        }
       // target.parent().addClass('test');
        //alert("this is p ");
    }
}
//$("ul").click(handler).find("ul li").addClass('test');
$("ul").click(handler);