JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mobile-menu">
    <div id="megaMenu">
        <div id="megaMenuToggle"></div>
        <ul id="megaUber">
            <li><a href="#">1</a>

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

                        <ul>
                            <li><a href="#">3</a>
                            </li>
                            <li><a href="#">3</a>
                            </li>
                            <li><a href="#">3</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">2</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">1</a>
            </li>
            <li><a href="#">1</a>
            </li>
            <li><a href="#">1</a>
            </li>
        </ul>
    </div>
</div>

CSS

.mobile-menu #megaMenu #megaUber > li.active > a + ul {
    display: block !important;
}
.mobile-menu #megaMenu #megaUber > li > a + ul {
    display: none !important;
}
.mobile-menu #megaMenu #megaUber > li > ul > li.active > a + ul {
    display: block !important;
}
.mobile-menu #megaMenu #megaUber > li > ul > li > a + ul {
    display: none !important
}

JavaScript

$(function () {
    $('#megaUber').find('a').click(function (e) {
        e.stopPropagation();
        $(this).parent().toggleClass("active");
    });
});