触摸屏用户必须单击链接两次才能使用

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就像它的悬停一样(如:hover)当我第一次点击子链接时,主链接(我第一次点击以显示下拉列表)失去了状态悬停 这就是为什么我认为这是一个焦点问题.

编辑:请求的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一个upvote来消除解决方案):

$(".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答案,因为它不起作用)

Answer 2

阅读本文:http://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html

但是,如果可点击元素在鼠标悬停时也会执行某些操作,则点击该元素将触发鼠标悬停事件而不是单击.再次点击同一元素将产生点击事件.

如果您有鼠标悬停事件,iOS(可能是其他操作系统)将在初始点击时触发,而不是实际的点击事件.我会向你的JS添加一些警报,以确定在初始点击时正在调用哪个事件.