javascript - 触摸屏用户必须点击链接两次才能使用

Question

我有这个下拉菜单，它通常会在悬停时下拉，但在触摸设备上，我只是简单地制作了它，以便您也可以点击打开它。

问题是它看起来像 <ul>下拉菜单没有完全聚焦或其他原因，因为我必须在我的 iPhone 4 上点击链接两次才能使它们正常工作。

这是我正在使用的代码:

$(document).ready(function() {

    $('.myMenu > li').bind('mouseover', openSubMenu);
    $('.myMenu > li').bind('mouseout', closeSubMenu);
    $('.myMenu > li').bind('click', toggleSubMenu);

    /* Also tried, currently using:
    $('.myMenu > li').bind('tap', toggleSubMenu);
    */

    function openSubMenu() {
        $(this).find('ul').addClass("hovered");
    };

    function closeSubMenu() {
        $(this).find('ul').removeClass("hovered");
    };

    function toggleSubMenu() {
        $(this).find('ul').toggleClass("hovered").focus();
    };

});

.focus()是我尝试添加的修复程序。它没有破坏代码，但也没有修复它。我知道我可以做几件事来让它更好地用于触摸设备，但现在，我坚持使用点击方法。

顺便说一句:

.hovered{
    opacity:1 !important;
    visibility: visible !important;
}

HTML 设置基本上是 <ul>里面的<ul>就像您期望的下拉菜单一样。如果您出于某种原因想要标记，请直接说出来，我会添加它。

编辑:这是我正在处理的网站的链接: http://bok-it.underbakke.net

编辑:我刚才注意到的一些您可能会觉得有用的附加信息。我第一次单击链接时，当我第一次单击子链接时，该链接上的 CSS 就像悬停一样(如:悬停)主链接(我第一次单击以显示下拉列表的链接)失去状态的悬停。这就是为什么我认为这是一个焦点问题。

编辑:请求的 HTML 标记:

<ul class="myMenu">
        <li><a href="/"><span class="icon-home"></span> Framside</a></li>
        <li><a href="#" id="nbutikk"><span class="icon-cart"></span> Butikk</a>
            <ul>
                <li><a href="/sand"><span class="icon-cart"></span> Sand</a></li>
                <li><a href="/sauda"><span class="icon-cart"></span> Sauda</a></li>
               <li><a href="http://kontorhandel.no"><span class="icon-cart"></span> Nettbutikk</a></li>
            </ul>
        </li>
        <li><a href="#" id="nit-tjenester"><span class="icon-console"></span> IT Tjenester</a>
           <ul>
                <li><a href="/driftsavtale"><span class="icon-console"></span> Driftsavtale</a></li>
                <li><a href="/asp_vps"><span class="icon-console"></span> ASP & VPS</a></li>
                <li><a href="/overvaking"><span class="icon-console"></span> Overvåking</a></li>
                <li><a href="/nettverk"><span class="icon-console"></span> Nettverk</a></li>
            </ul>
        </li>
        <li><a href="#" id="nsupport"><span class="icon-info"></span> Support</a>
           <ul>
                <li><a href="/fjernsupport"><span class="icon-info"></span> Fjernsupport</a></li>
                <li><a href="/utskrift_asp"><span class="icon-info"></span> Utskrift ASP</a></li>
                                    <li><a href="/rdp_rycloud"><span class="icon-info"></span> RDP: Rycloud</a></li>
                <li><a href="teamviewer_host"><span class="icon-info"></span> TeamViewer Host</a></li>
                                </ul>
        </li>
        <li><a href="/kontakt"><span class="icon-mail"></span> Kontakt Oss</a></li>
    </ul>

------------解决方案------------

编辑:对于正在寻求解决方案的人，这里是为我修复它的 jQuery(您还应该给@jonsuh 一个赞成票来解决这个问题):

$(".myMenu li ul li a").on("touchend", function(event) {
  window.location.href = $(this).attr("href");
});

Answer 1

当您将鼠标悬停在子菜单中的链接上时，父列表项的状态会发生变化。

但是在 iOS 中，当您点击子菜单中的链接时，它会检测到父列表项状态需要更改，因此它不会执行点击，而是更改元素的状态，这就是为什么它需要第二次点击。 (我希望这是有道理的)。

切入正题，确保父列表项中没有状态更改。将鼠标悬停在其上时与将鼠标悬停在子菜单链接上时保持相同。

我没有测试过这些，当我不使用代码时很难，但可能的解决方案如下:

您可以使用 jQuery 并检测触摸端来完成此操作，这不是最佳解决方案，但它应该有效:

$(".myMenu ul li a").on("touchend", function(event) {
  window.location.href = $(this).attr("href");
});

另一种方法是尝试使用 CSS 保持状态相同，这可能会阻止 Safari 检测到状态变化。 (我删除了我的 CSS 答案，因为它不起作用)