Inner Elements Click jQuery

I've set up a fiddle here http://ift.tt/1KI7FcN with the following markup -

<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>

I use the following code -

$('.clickable').on('click', function(event){
    $(this).find('ul').slideToggle();
    event.stopPropagation();
});

where only the elements with class clickable can be clicked.

When I click one of the sublist's item, the whole li slides up. I only want it to happen when the parent element is clicked and not one of the children(s). How can I prevent this from happening ?