JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="region-responsive-nav">
    <ul>
        <li><a href="one.html">One</a></li>
        <li><a href="two.html">Two</a>
            <ul>
                <li><a href="twoa.html">Two A</a></li>
                <li><a href="twob.html">Two B</a></li>
            </ul>
        </li>
        <li><a href="three.html">Three</a></li>
        <li><a href="four.html">Four</a>
            <ul>
                <li><a href="foura.html">Four A</a></li>
                <li><a href="fourb.html">Four B</a></li>
            </ul>
        </li>   
    </ul>
</nav>

CSS

.region-responsive-nav {
  width: 100%;
  background: tomato;
}

JavaScript

$(document).ready(function() {
    // Hide the sub-items
    $('.region-responsive-nav > ul > li > ul').hide();
    
    $('.region-responsive-nav ul li').on('click', function(event) {
        if ($(this).children('ul:not(:visible)').length > 0) {
            event.preventDefault();
            $(this).children('ul').slideToggle();
        } else {
            // Normal behaviour
        }
    });
});