JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="region-responsive-nav">
    <ul>
        <li>One</li>
        <li>Two
            <ul class="sub">
                <li>Two A</li>
                <li>Two B</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li>Three</li>
        <li>Four
            <ul>
                <li>Four A</li>
                <li>Four B</li>
            </ul>
        </li>   
    </ul>
</nav>

CSS

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

JavaScript

var parentWithChildren = $('region-responsive-nav ul');
    //var parentWithChildren = $('region-responsive-nav ul').children('has:ul').length > 0 );

    $('.region-responsive-nav ul ul').hide();

    //prevent default once
    if (parentWithChildren.children('has:ul').length > 0 ) {
          $('.region-responsive-nav ul li').one(function(event) {
            $(this).children('ul').slideToggle();
            event.preventDefault();
          });
    }else{
        //open link immediately 
    }