Question

Iv用尽了我能想到或找到的解决方案。我正在修复到页面顶部。左侧有一个锚点，可以将您带到页面顶部，如果悬停在页面顶部则会显示其他外部链接。右侧是一个页面部分列表，其中包含用于滚动到它们的锚点。

这一切都可以在桌面上正常工作，因为悬停和点击是单独的事件，但在ipad上它们是相同的。在iPad上，您应该可以触摸“产品列表”列表项并显示下拉菜单。如果再次触摸它会带你回到顶部。现在当你触摸它时会带你回到顶部并显示悬停。

这是一个重新创建代码和问题的jsfiddle。 http://jsfiddle.net/hyaTV/5/

HTML

<ul class="one">
<li><a class="intrapage" href="#stage">Product Title</a>
    <ul>
        <li><a href="other product">other product</a></li> <!-- link that goes to different page -->
        <li><a href="other product">other product</a></li> <!-- link that goes to different page -->
    </ul>
</li>
</ul>
<ul class="two">
    <li><a class="intrapage" href="#section_one">birds</a></li> <!-- goes to Birds section -->
    <li><a class="intrapage" href="#section_two">bees</a></li> <!-- goes to bees section -->
</ul>

CSS

ul.one{float:left;list-style:none;}
ul.one ul{display:none;}
ul.one > li:hover ul{display:block;}

/* styling for right side nav */
ul.two{float:right;list-style:none;}
ul.two li{display:inline-block;}

JS

// scrolls window to element id with easing
$(".intrapage").click(function(event) {
    event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 850);
return false;
});

Answer 1

您可以使用iOS :hover issue。我相信将CSS更改为

ul.one > li ul { display: none; }
ul.one > li:hover ul { display: block; }

也就是说，上面问题在其他移动操作系统上不存在。在iOS上无法鼠标移出。

最好detect if user is on mobile device并使用javascript将.mobile添加到<body>，然后在点击事件上切换子菜单。

CSS

ul.one > li:hover ul, ul.one > li.hover ul { display: block; }

JS

$('body.mobile ul.one > li').click(function(e) {
  $(this).toggleClass('hover');
});

Answer 2

我想出了一个似乎有用的解决方案。它将要求您的页面包含Modernizr JS以检查是否支持触摸。

JS

if (document.addEventListener) {
document.addEventListener("touchstart", function(){}, true);
}

if($('html').hasClass('touch')){

    $('.one > li').click(function(e){
        if($(this).hasClass('hover')){
    //      $(this).removeClass('hover');
        } else {
            $(this).toggleClass('hover');
        }
    });

    $('html').bind('touchstart', function(){
        if($('.one > li').is(':hover')){
                    // do nothing
        } else {
            $('.one > li.hover').removeClass('hover');
        }
    });

    $('.one a.intrapage').click(function(event){
        if($('.one > li').hasClass('hover')){
            event.preventDefault();
            $('html,body').animate({scrollTop:$(this.hash).offset().top}, 850);
            return false;               
        } else {
            event.preventDefault();
        }
    });

    $(".two .intrapage").click(function(event) {
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 850);
        return false;
    }); 

} else {
    $(".intrapage").click(function(event) {
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top - 50}, 850);
        return false;
    }); 
}

iOS点击是激活下拉菜单的父锚点

2 个答案: