JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top">
    <ul>
        <li class="menu-item-has-children">Click here
            <ul class="sub-menu">
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                <li class="menu-item-has-children">Aliquam tincidunt mauris eu risus.
                    <ul class="sub-menu">
                        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                        <li>Aliquam tincidunt mauris eu risus.</li>
                        <li>Vestibulum auctor dapibus neque.</li>
                    </ul>
                </li>
                <li>Vestibulum auctor dapibus neque.</li>
            </ul>
        </li>
    </ul>
</div>

SCSS

$white:#fff;
 $grey: #999;
 @import url(http://fonts.googleapis.com/css?family=News+Cycle);
 .top {
    font: 1.1em'News Cycle', sans-serif;
    padding: 1%;
    background: $grey;
    color:$white;
    margin-bottom: 1%;
    a {
        text-decoration: none;
        color:$white;
    }
    ul > li {list-style:none;}
}
.menu-item-has-children {
    &:before {
        content:"+ ";
        color: $white;
    }
}
.current {
    &:before {
        content:"- ";
    }
}
.menu-item-has-children {
    margin-left: 2%;
}
.sub-menu {
    li {
        margin-left: 2%;
    }
}

JavaScript

$(".top ul li:not(.current)").find("ul").hide().end() // Hide all other ULs
.click(function (e) {
    if (this == e.target) {
        //$(this).children('ul').slideToggle();
    }
    //$(this).children("li.menu-item-has-children").text(this.toggle ? "-" : "+");
    //return false;
});

$(".menu-item-has-children").on("click", function(e){
    e.stopPropagation();
    var clickedLi = $(this);
    $("> ul", clickedLi).slideToggle();
    clickedLi.toggleClass("current");
    
});