JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigation">
    <ul class="nav_bullet">
    <li><a href="#">Section one</a>
        <ul><!-- Note absence of classes -->
        <li>Link1</li>
        <li>Link2</li>
        <li>Link3</li>
        </ul>
    </li>
    <li><a href="#">Section two</a>
        <ul>
        <li>Link1</li>
        <li>Link2</li>
        <li>Link3</li>
        </ul>
    </li>
    <li><a href="#">Section three</a>
        <ul>
        <li>Link1</li>
        <li>Link2</li>
        <li>Link3</li>
        </ul>
    </li>
    <li><a href="#">Section four</a>
        <ul>
        <li>Link1</li>
        <li>Link2</li>
        <li>Link3</li>
        </ul>
    </li>
    </ul>
</div>

CSS

/*
Initial hiding of nested <ul>s is performed here in CSS
*/
.navigation > ul > li > ul {
    display: none;
}

JavaScript

$(".navigation").children("ul").children("li").click(function(e) {
    if($(e.target).closest("li").get(0) !== this) { return; }//anti-bubbling measure (try  without this line and see the effect)
    $(this).find("ul").stop(true, true).slideToggle();
});