1.                         <li class="fa fa-plus fa-fw menu-parent"><a href="#"><span> Productos </span></a>
                               <ul class="menu-child">
                                   <li class="fa fa-gift fa-fw"><a href="?mod=products"><span> Productos </span></a></li>
                                   <li class="fa fa-server fa-fw"><a href="?mod=products&action=categories"><span> Categorias </span></a></li>
                                   <li class="fa fa-apple fa-fw"><a href="?mod=products&action=brands"><span> Marcas </span></a></li>
                               </ul>
                           </li>

1.     $(document).ready(function($) {
           $('.menu-parent').on('click', function(event) {       
               event.preventDefault();
               $(this).find("ul").slideToggle(300);
           });   
       });       
   

This is a simple menu element with a sub menu which is hidden by default and gets visible when you click on his parent.

My problem is when I click a sub menu link, the sub menu itself change visibility as if I click on his parent.

Shouldn't this only happen while clicking elements with "menu-parent" class?

Please help, I can't figure why this behavior.