Question

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

我刚刚通过在事件处理程序中调用tap的回答建议尝试了上面的代码。它仍然不允许 Tap＆gt;下拉＆gt;双击＆gt;访问家长链接，作为下面的演示参考链接呈现。我是否在错误的地方插入了点击事件？在我的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

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

Answer 1

好的，我知道我完全死于发帖，但我遇到了类似的问题并且遇到了这个问题，试图解决我自己的问题。既然我得到了答案，我也可以分享：D

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

 //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之间切换。

Answer 2

您可以使用jQuery Mobile tap事件：

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

Answer 3

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

也可以用于键盘导航（虽然选择二级菜单很难）。可能希望JS绑定到焦点以及悬停。

下拉菜单开启：悬停以点击两次移动

3 个答案: