JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<ul class="navigation">
<li><a href="#">Top Link</a>
    <ul>
        <li>Child Item</li>
        <li>Child Item</li>
        <li>Child Item</li>
        <li>Child Item</li>
        <li><a href="http://www.google.com">Test Link</a></li>
    </ul>
</li>
<li><a href="#">Top Link 2</a>
    <ul>
        <li>Child Item</li>
        <li>Child Item</li>
        <li>Child Item</li>
        <li>Child Item</li>
        <li><a href="http://www.google.com">Test Link</a></li>
    </ul>
</li>
<li><a href="#">Top Link 3</a>
    <ul>
        <li>Child Item</li>
        <li>Child Item</li>
        <li>Child Item</li>
        <li><a href="http://www.google.com">Test Link</a></li>
    </ul>
</li>
</ul>

CSS

ul.navigation  >li > ul {
    display: none; 
}

JavaScript

$('ul.navigation > li > a').click(function (){
        if($(this).siblings('ul').length){
            $('ul.navigation > li > ul').slideUp();
            $(this).siblings('ul').slideDown();
            return false;
        } else{
            alert('Link Clicked');
            // Maybe do some more stuff in here...
        }
    });