Javascript 下拉菜单打开：鼠标悬停可轻触手机两次

更新：周五上午9:12:13

<div id="containerdropdown">
  <a class="mainNav navLink" href="" id="mainLink" onmouseover="rolloverMenu(1, 'mainMenu');" onmouseout="rolloverMenu(0, 'mainMenu');">ALL CATEGORIES</a>
  <div class="rolloverMenu" id="mainMenu" style="display: none;" onmouseover="rolloverMenu(1, 'mainMenu');$('.navLink').on('tap', function(){
   rolloverMenu(1, 'mainMenu');})" onmouseout="rolloverMenu(0, 'mainMenu');">

    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a>

  </div></div>

它们在台式机上工作正常（但在iOS上仍然很糟糕），在Android和其他移动设备上则非常糟糕

我想要这个：

但我真的不想把所有的下拉列表都重新编码有没有人能建议一个代码调整，让我的下拉列表可以在点击时而不是在鼠标悬停时运行，如上面的示例所示？？

.rolloverMenu { display:none; } /* You should hide this with CSS instead of inline; */
.navLink:hover + .rolloverMenu,
.navLink:focus + .rolloverMenu { display:block; }

---

也适用于键盘导航（尽管切换到辅助菜单会很困难）。可能需要将JS绑定到焦点以及悬停。

您可以使用

jQuery Mobile

点击事件：

$('.navLink').bind('tap', function(){
   rolloverMenu(1, 'mainMenu');
})

好吧，我知道我完全是necro发帖，但我也有类似的问题，我在试图解决自己的问题时遇到了这个问题。现在我有了一个答案，我不妨分享一下：D

我所做的是，使用常规jQuery而不是jQuery mobile，编写一个类来显示子菜单，然后使用touchstart打开和关闭该类，并阻止其默认设置。然后我使用setTimeout技术检测双击并转到父链接。这是一个正在运行的代码笔。


注意：Ctrl+Shift+I如果您在Chrome中的PC上访问开发人员的工具，请单击移动设备图标以模拟各种触摸设备

 //Tap and double tap function for large touch screens
var tapped=false;
$("nav li.gotsMenus h3").on("touchstart", function(e){
    var theOne = $(this);
    if((!tapped)){
      tapped=setTimeout(function(){
//single tap function
            $("nav li.gotsMenus").not(theOne.parent()).removeClass("showSub");
        theOne.parent().toggleClass("showSub");
            e.preventDefault();
          tapped=null;
      },300); //wait 300ms
    } else {
//double tap function
      clearTimeout(tapped);
      tapped=null;
      window.location = $(this).find("a").attr("href");
    }
    e.preventDefault();
});

这是我们要换的课

nav li ul{
overflow: hidden;
max-height:0;
transition: max-height .5s ease-in; 
width: 200px;
position: absolute;
font-size: .8em;
}
nav li.showSub ul {
 max-height: 1000px;
}

我正在为幻灯片效果设置“最大高度”属性的动画，但您也可以轻松地在“显示：无”和“显示：块”之间切换。
这听起来很棒。我怎样才能用我已有的实现呢？@cam77你可以调用事件处理程序中的函数。谢谢Raminson，我已经相应地更新了这个问题。如果您有任何其他建议，请告诉我。@cam77如果未触发tap事件，请使用
bind（）
方法。另外，最好将javascript代码保存在外部js文件中。。刚试过。同样的问题。单击父链接会转到父页面，不会触发手机上的下拉列表。谢谢你：/
nav li ul{
overflow: hidden;
max-height:0;
transition: max-height .5s ease-in; 
width: 200px;
position: absolute;
font-size: .8em;
}
nav li.showSub ul {
 max-height: 1000px;
}