JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
    <li>
      <span>stuff</span>
      <a href="#">Cat 1</a>
        <ul>
           <li>
               <span>stuff</span>
               <a href="#">Subcat1</a>
                 <ul>
                    <li>
                       <span>Stuff</span>
                       <a href="#">Subcat Details</a>
                    </li>
                 </ul>
           </li>
        </ul>
    </li>
</ul>

JavaScript

$("#nav li:not(:has(li)) a").toggle(function() { //1st click
              alert("1st Click");
        }, function() { //2nd click
            alert("2nd Click");
        });