0

对于这个问题，我已经没有我能想到或找到的解决方案了。我正在处理一个固定在页面顶部的问题。左侧有一个锚点，可将您带到页面顶部，如果将鼠标悬停在它上面将显示其他外部链接。右侧是带有锚点的页面部分列表，您可以滚动到它们。

这一切在桌面上都可以正常工作，因为悬停和单击是单独的事件，但在 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;
});
4

2 回答 2

0

我想出了一个似乎可行的解决方案。它将要求您的页面包含 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;
    }); 
}
于 2013-04-26T16:21:17.187 回答
0

您可以使用iOS :hover 问题来发挥您的优势。我相信通过将您的 CSS 更改为

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

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

最好检测用户是否在移动设备上并添加.mobilejavascript，然后在点击事件<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');
});
于 2013-04-25T16:38:34.047 回答