每当我单击任何锚元素时，window 都会跳转到 Mobile 中的顶部。

Question

我正在制作响应式下拉菜单。它在笔记本电脑上运行良好，但是当我使用我的 android 手机点击此下拉列表中的任何 link 时，window 会跳到顶部。我尝试在 JQuery 中使用 preventDefault，但我认为下拉菜单由 CSS 悬停操作提供支持，这就是 PreventDefault 方法不起作用的原因。任何想法我应该在我的 JQuery 中添加什么来防止这种情况，因为它非常烦人。这里是link。 JSFiddle

我正在使用这个脚本来切换文本。

   $(document).ready(function(){

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


      });

Answer 1

除了 .preventDefault() 之外，您还可以在 click(){ } 末尾使用 return false; 来防止默认操作。

Answer 2

这有效。

$(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;
  });

或者，您可以使用以下代码并删除 css 文件中的悬停功能。

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

每当我单击任何锚元素时，window 都会跳转到 Mobile 中的顶部。

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

jquery

responsive-design

dropdown

preventdefault