Whenever i click on any anchor element, the window jumps to top in Mobile.

Question

I am making responsive dropdown menu. It is working nicely in Laptop, but when i click on any link in this dropdown using my android mobile, the window jumps to the top. I tried to use preventDefault in the JQuery, but I think the Dropdown is powered by CSS Hover action, thats why PreventDefault method is not working. Any Idea what should i add in my JQuery to prevent this, because its very annoying. Here is the link. JSFiddle

I am using this Script to toggle the text.

   $(document).ready(function(){

        $(".show-menu").click(function(){
            if ($(this).text() == "Show Menu")
               {
                   $(this).text("Close");    } else 
                   {
                       $(this).text("Show Menu");
                   };
            });


      });    

Answer 1

This works.

$(document).ready(function(){

    $(".show-menu").click(function(e){
        if ($(this).text() == "Show Menu")
           {
               $(this).text("Close");    } else 
               {
                   $(this).text("Show Menu");
               };
        });
     e.preventDefault();
     return false;
  });    

Alternatively you can use the below code and remove your hover functions in the css file.

$("#menu li").hover(function(){
    $(this).find("ul.hidden").fadeIn("fast");
}, function(){
    $(this).find("ul.hidden").fadeOut("fast");
});