2

我有以下代码，我不想让移动设备兼容。现在下拉菜单不出来，它直接进入链接。我不希望它在第二次单击时转到链接，第一次使下拉菜单出来。

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

1 回答 1

0

如果你想用纯 javascript 和 css 做到这一点，简而言之，这就是你需要做的：

在整个导航中覆盖 touchstart 和 touchend 事件

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

在这一点上，您必须添加代码以打开导航。请注意，导航中的任何链接此时都不起作用。

使用 javascript 处理每个链接点击（或导航主项目上的第二个链接点击）并使用

window.location.href = link.url;

导航投掷页面。

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

于 2013-06-19T22:06:26.143 回答