Question

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

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

Answer 1

如果你想用纯粹的javascript和css来做这件事，简而言之，这就是你需要做的：

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

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

此时您必须添加代码才能打开导航。请注意，此时导航中的任何链接都不起作用。

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

window.location.href = link.url;

导航投掷页面。

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

移动兼容下拉菜单

1 个答案: