iOS點擊激活下拉菜單的父錨點

如果我想到或找到了解決此問題的解決方案，則會耗盡Iv。我正在修復頁面的頂部。左側有一個可將您帶到頁面頂部的錨點，如果在其上方懸停，則會顯示其他外部鏈接。右側是帶錨的頁面部分的列表，可供您瀏覽。iOS點擊激活下拉菜單的父錨點

這一切都適用於桌面作爲懸停和點擊是單獨的事件，但在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;}

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

來源

2013-04-25 user1678025

http://www.theverge.com似乎已經解決了這個問題，但我不喜歡他們的代碼是多麼複雜的導航，只是似乎並不像一個很優雅的方案。 – user1678025 2013-04-25 18:48:22

你可以使用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; }

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

來源

2013-04-25 16:38:34 soemarko

在你的css中，不會li：hover覆蓋ipad上的li.hover，因爲它會應用：觸摸事件結束後懸停？ – user1678025 2013-04-25 18:35:53

你是對的，..它應該是'body.mobile ul.one> li.hover ul {'愚蠢的剪切和粘貼。 – soemarko 2013-04-26 07:21:28

我想出了這似乎工作的解決方案。它將要求你的頁面包含Modernizr 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-26 16:21:17 user1678025

iOS點擊激活下拉菜單的父錨點

回答

相關問題