手机兼容下拉菜单

我有以下代码，我不想让手机兼容。现在下拉菜单不会出来，它直接进入链接。我不想去第二次点击链接，第一次使下拉菜单出来。手机兼容下拉菜单

<ul> 
    <li><a href="#">Home</a></li> 
    <li> 
     <a href="#">Item 1</a> 
     <ul> 
      <li href="#"><a>Compositions</a></li> 
      <li href="#"><a>Improv</a></li> 
      <li href="#"><a>Recitals</a></li> 
      <li href="#"><a>Videos</a></li> 
     </ul> 
    </li> 
    <li href="#"><a>Programming</a></li> 
    <li href="#"><a>Academic</a></li> 
    <br class="clear" /> 
</ul>

CSS：

#topnav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    background-color: #444; 
    border-radius: 0.3em; 
    color: #ddd; 
    font-size: 16px; 
    vertical-align: middle; 
    text-align: center; 
} 
#topnav ul li { 
    border-radius: 0.2em; 
    float: left; 
} 
#topnav ul li a { 
    display: inline-block; 
    margin: 0.4em 1em; 
    color: inherit; 
} 
#topnav ul li ul { 
    border-top-left-radius: 0; 
    border-top-right-radius: 0; 
    display: none; 
    position: absolute; 
} 
#topnav ul li ul li { 
    float: none; 
    text-align: left; 
} 
#topnav ul li:hover ul, #topnav ul li ul:hover { 
    display: block; 
} 
#topnav li:hover { 
    background-color: #04f; 
}

来源

2013-06-19 bjb568

如果你想用纯JavaScript和CSS，在简单地说要做到这一点，这是你需要做的：

覆盖touchstart和touchend事件对整个导航

navigation.addEventListener("touchend", function (e) { 
    e.preventDefault(); 
    // other code here 
}, false);

在这一点上，你必须添加代码来打开导航。请注意，此时导航中的任何链接都无法工作。

处理每一个链接点击（或导航主要项目第二个链接点击）使用JavaScript和使用

window.location.href = link.url;

导航抛页面。

我希望这有助于即使它不多。如果在那里有任何帮助，你也可以检查已经建立的库。最后一个提示：在下拉菜单中检查最新的iOS默认行为，并尝试模拟那里的功能。祝你好运！ :)

来源

2013-06-19 22:06:26

手机兼容下拉菜单

回答

相关问题