JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="dd-options">
		<li>
			<a class="dd-option"><label class="dd-option-text">Main_parent1</label></a>
		</li>
		<li>
			<a class="dd-option">
			<label class="dd-option-text">- Main_child1</label>
			</a>
		</li>
		<li>
			<a class="dd-option">
			<label class="dd-option-text">- Main_child2</label>
			</a>
		</li>
		<li class="minus">
			<a class="dd-option">
			<label class="dd-option-text">-- Sub_child1</label>
			</a>
		</li>
		<li>
			<a class="dd-option">
			<label class="dd-option-text">Main_parent2</label>
			</a>
		</li>
		<li>
			<a class="dd-option">
			<label class="dd-option-text">- Main_child3</label>
			</a>
		</li>
	</ul>

JavaScript

jQuery('.dd-options .dd-option-text').filter(function () {
    return jQuery.trim(jQuery(this).text())[0] == '-';
}).closest('li').hide().addClass('minus');

jQuery('.dd-options > :not(.minus)').click(function () {
    jQuery(this).nextUntil(':not(.minus)').show();
}, function () {
    jQuery(this).nextUntil(':not(.minus)').hide();
})