jQuery ul li trees - slideToggle only li with ul child - html

Question

I know there are a lot of similar solutions.. This one almost works :)
I have an unsorted list:
<ul id="Tree" class="sub-menu">
<li class="folder">First level
<ul class="sub-menu">
<li>File 1.1</li>
<li class="folder">Second level
<ul class="sub-menu">
<li>File 2.1</li>
<li>File 2.2</li>
<li class="folder">Tretji nivo
<ul class="sub-menu">
<li>File 3.1</li>
<li>File 3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
And the jQuery:
$('.folder').click(function(event) {
event.stopPropagation();
$(this).find('>.sub-menu').slideToggle();
});
Click on .folder works as desired. The problem is that the slideToggle is triggered on all li elements. So if I click on a li > a element the file is downloaded but the ul is toggled also. I want to prevent toggle when I click on an element that has no direct ul child.

Answer 1

You could add the folder class to the level text instead of the whole li tag :
$('.folder').click(function(event) {
event.stopPropagation();
$(this).next('.sub-menu').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="Tree" class="sub-menu">
<li><span class="folder">First level</span>
<ul class="sub-menu">
<li>File 1.1</li>
<li><span class="folder">Second level</span>
<ul class="sub-menu">
<li>File 2.1</li>
<li>File 2.2</li>
<li><span class="folder">Tretji nivo</span>
<ul class="sub-menu">
<li>File 3.1</li>
<li>File 3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>