Jquery code prevents my hyperlinks to work

Question

I have a jquery problem. After I have written a code which can be seen below. My hyperlinks do not work somehow. The same links which are situated on the footer work perfectly. Most probably I am doing something wrong in query. Could you help me to handle the problem.

Thanks,

 $(".menu-url > a").on('click mouseenter',
     function(){ 
         $(this).css("color","#000"),
         $(this).next("div").css("visibility","visible"),
         $(".menu-url > div").not( $(this).next("div") ).css("visibility","hidden"),
         $(".menu-url > a").not( $(this) ).css("color","#fff");
         return false;
     }
 );

 $(document).click(function() {
    $(".menu-url > div").css("visibility","hidden"),
    $(".menu-url > a").css("color","#fff");
});
$(".menu-url").click(function(e) {
    e.stopPropagation();
    return false;
});

Answer 1

My hyperlinks do not work somehow.

That's because you're telling jQuery to stop them from working. return false from a click handler tells jQuery to tell the browser to 1. cancel bubbling, and 2. to prevent the default action (which for a link is to follow the link).

If you want to cancel bubbling but not prevent the default action, accept the event argument, remove return false;, and add a call to stopPropagation:

$(".menu-url > a").on('click mouseenter',
    function(e){ 
        $(this).css("color","#000"),
        $(this).next("div").css("visibility","visible"),
        $(".menu-url > div").not( $(this).next("div") ).css("visibility","hidden"),
        $(".menu-url > a").not( $(this) ).css("color","#fff");
        e.stopPropagation();
    }
);

If you don't need to stop propagation, you just remove the return false;.

$(".menu-url > a").on('click mouseenter',
    function(){ 
        $(this).css("color","#000"),
        $(this).next("div").css("visibility","visible"),
        $(".menu-url > div").not( $(this).next("div") ).css("visibility","hidden"),
        $(".menu-url > a").not( $(this) ).css("color","#fff");
    }
);