emberjs menu component bubbling

I have a menu component, which build a tree menu from an array. To toggle the sub menus I do:

  didInsertElement:function(){
    this.$('li.sub').click(function(e){
      $('ul', this).slideToggle();
    });
  }

I works fine as long as I click on 'Settings'. If I try to click one of the sub menus ex. 'Currency' It closes the parent menu item.

Here is a jsBin to demonstrate the problem: Click on 'Settings' -> then click one of the opened sub items:

http://ift.tt/1znG0fZ