Here is a link to my interactive code example: http://jsfiddle.net/zqegh7yz/1/. The HTML markup in the example looks like this:
<ul class="list">
<li class="clickable">item 1
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
<li>subitem 3</li>
</ul></li>
<li>item 2</li>
<li class="clickable">item 3
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
<li>subitem 3</li>
</ul></li>
<li>item 5</li>
</ul>
The JavaScript code I am using is as follows:
$('.clickable').on('click', function(event){
$(this).find('ul').slideToggle();
event.stopPropagation();
});
In this setup, only elements with the class "clickable" can be clicked. However, when clicking on a subitem within a sublist, the whole list item slides up. I want this behavior to occur only when clicking on the parent element and not any of its children. How can I prevent this from happening?