Code getting triggered over the wrong element

Code getting triggered over the wrong element

by Akram kamal

HTML

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

CSS

.menu-child {
    display: none
}

JavaScript

$(document).ready(function($) {
    $('.menu-parent>a').on('click', function(event) {
        console.log(this)
        event.preventDefault();
        $(this).next().slideToggle(300);
    });
    $('.menu-parent li a').on('click', function(event) {
        console.log($(this).attr("href"))
        event.preventDefault();
    })
});