下拉菜单：悬停在移动设备上点击两次答案

【问题标题】：Drop-Down Menu on :hover to tap twice for Mobile下拉菜单：悬停在移动设备上点击两次
【发布时间】：2012-05-19 12:04:57
【问题描述】：

更新：周五上午 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>

我刚刚通过在事件处理程序中调用点击的已回答建议尝试了上述代码。它仍然不允许 点击 > 下拉 > 双击 > 访问父链接，因为下面的演示参考链接呈现。我是否将点击事件插入错误的位置？在我的 Android HTC Incredible 2 上，父链接仍然是导航到该页面的标准链接，而没有出现下拉菜单？

我也在头上加载这个：http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js

原问题：

我有一个即将发布的网站。

我在以下代码中实现了下拉菜单：

<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');" 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>

它们在桌面上运行良好，还可以（但在 iOS 上仍然很糟糕），在 Android 和其他任何地方的移动设备上都非常糟糕。

我想要这个： http://suan.github.com/make_dropdown/demo.html

但我真的不想重新编码我所有的下拉菜单。 任何人都可以建议一个代码调整，让我的下拉菜单在点击时起作用，而不是像上面的示例那样在移动设备上悬停？

【问题讨论】：

标签： javascript jquery mobile css responsive-design

【解决方案1】：

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

我所做的是，使用常规 jQuery 而不是 jQuery mobile，我编写了一个类来显示子菜单，然后使用 on touchstart 打开和关闭该类并阻止其默认设置。然后我使用 setTimeout 技术检测双击并转到父链接。这是它的一个 CodePen。 http://codepen.io/StuffieStephie/pen/QbZjJP
注意：如果您在 PC 上使用 Chrome 访问开发者工具，请使用 Ctrl+Shift+I，然后单击移动设备图标以模拟各种触摸设备。

 //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;
}

我正在为幻灯片效果的 max-height 属性设置动画，但您可以轻松地在 display: none 和 display: block 之间切换。

【讨论】：

【解决方案2】：

你可以使用jQuery Mobiletap事件：

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

【讨论】：

这听起来很棒。我怎么能用我已经拥有的东西来实现？
@cam77 您可以在事件处理程序中调用该函数。
谢谢拉明森，我已经相应地更新了问题。如果您有任何其他建议，请告诉我..
@cam77 使用bind() 方法，如果没有触发点击事件。最好将 javascript 代码保存在外部 js 文件中。
替换 on()？ ..刚试过。同样的问题。单击父链接会转到父页面，并且不会触发移动设备上的下拉菜单。不过谢谢：/

【解决方案3】：

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

也应该适用于键盘导航（尽管切换到二级菜单会很困难）。可能希望 JS 绑定到焦点和悬停。

【讨论】：