JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="parent"><a style="cursor: pointer;">Parent One</a>

        <ul class="child display" id="ChildOne">
            <li><a href="#">Child Of Parent One</a>

            </li>
            <li><a href="#">Child Of Parent One</a>

            </li>
        </ul>
    </li>
    <li class="parent"><a style="cursor: pointer;">Parent Two</a>

        <ul class="child profile" id="ChildTwo">
            <li><a href="#">Child Of Parent Two</a>

            </li>
            <li><a href="#">Child Of Parent Two</a>

            </li>
            <li><a href="#">Child Of Parent Two</a>

            </li>
        </ul>
    </li>
    <li class="parent"><a style="cursor: pointer;">Parent Three</a>

        <ul class="child display" id="ChildThree">
            <li><a href="#">Child Of Parent Three</a>

            </li>
            <li><a href="#">Child Of Parent Three</a>

            </li>
        </ul>
    </li>...</ul>
<button id="esmaga">Esmaga</button>

JavaScript

function escocha() {
    var url = '/about/profile'
    var n = url.lastIndexOf("/");
    var myClassName = url.substring(n + 1, url.length)

    alert("The url: " + url);
    alert("The class name: " + myClassName);

    $(".child").each(function (index) {
        alert(this.id);
        if (this.className.indexOf(myClassName) > -1) { // if any class name for this element contains the string 'display'
            alert("I am the current page so my menu items won't collapse!");
        } else {
            $('#' + this.id).hide();
        }
    });
}

$("#esmaga").click(function () {
    escocha();
});