iPad上的典型CSS菜單下拉懸停問題

我們在iPad上懸停狀態和CSS菜單存在常見問題。因爲它不識別懸停狀態，所以不允許進行選擇。iPad上的典型CSS菜單下拉懸停問題

我們已經嘗試了onClick="return true"等大部分常見解決方法，並使用jQuery創建了一個要複製的動態懸停類：hover和其他幾個，現在我已經移除它們以清除代碼。我相信我們錯過了一些顯而易見的東西。

任何幫助指出我在這個正確的方向將不勝感激。

鏈接：iar.suissamesser.com

2013-06-21 jsuissa

我假設你說的是菜單，對嗎？我在這種情況下做的是在我的css :hover選擇器中添加另一行。想法是這樣的，點擊後，向#nav添加一個類，如'btn1。這也需要你添加一個類到你的列表項。
CSS

#nav li:hover > ul, 
#nav.btn1 li.btn1 > ul { 
    display: block; 
}

HTML

<ul class="clearfix btn1" id="nav"> 
    <li class="btn1"><a href="http://iar.suissamesser.com/about-us/campus">ABOUT US</a><br /> 
    <ul> 
     <li><a href="http://iar.suissamesser.com/about-us/campus">Campus</a></li> 
     <li><a href="http://iar.suissamesser.com/about-us/history-mission">History &amp; Mission</a></li> 
    </ul> 
    </li> 
    <li class="btn2"><a href="http://iar.suissamesser.com/parents/accreditation-and-licenses" >PARENTS</a><br /> 
    <ul> 
     <li><a href="http://iar.suissamesser.com/parents/accreditation-and-licenses">Accreditation and Licenses</a></li>

$("#nav > li > a").on("click", toggleNav); 
var toggleNav = function(evt){ 
    var clicked = $(this).parent().attr('class'); 
    $("#nav").removeClass("btn1 btn2 btn3 btn4 ...").addClass(clicked); 
    evt.preventDefault(); 
}

來源

2013-06-21 16:56:11

是的，這正是問題所在。非常感謝 - 我們會試試這個。 – jsuissa

因此，每個頂級項目都需要它自己的命名類btn1，btn2等？ – jsuissa

正確。任何引發懸停狀態的東西，在這種情況下，所有的第一級'li's。然後，您可以在父'ul＃nav'中切換選擇每個選項的類。如果您只針對現代瀏覽器，那麼只能使用移動設備，您還可以使用一些「第n個子」選擇器。 –

你應該看看這裏的例子http://www.hnldesign.nl/work/code/mouseover-hover-on-touch-devices-using-jquery/

這是很簡單的從那裏。好運，

來源

2013-06-21 16:50:38

謝謝！該鏈接的教程非常棒。 – ludditedev

中包括一個頁腳文件下面的代碼

$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { 
e.stopPropagation(); 
}

來源

2013-12-04 08:40:59 payi

我知道這是一個老問題，但我仍然遇到問題，非常感謝您的答案。 – jsuissa

這是一個晚很晚很晚respo但是。

你實際上不必使用任何類型的jquery或代碼，你只需要混淆或重寫在css中的ipad邏輯。

試試這個在你的CSS

.navigation li ul 
{ 
display:none; 
} 
.navigation li:hover ul 
{ 
display:block; 
} 
.navigation > li:hover 
{ 
background-color:#000; 
}

按照我的理解，這將停止iPad的級聯到Li和你打的A HREF因爲你沒有對李一懸停，但是，當子菜單打開，a成爲下一個響應者，因爲li已經有懸浮狀態激活。

這是偶然發現的。

HTML會是這樣

<ul class="navigation"> 
<li><a href="http://www.google.com">test link</a> 
<ul> 
<li><a href="#">link</a></li> 
<li><a href="#">link</a></li> 
<li><a href="#">link</a></li> 
<li><a href="#">link</a></li> 
</ul> 
<li><a href="#www.google.com">test link</a> 
<li><a href="#www.google.com">test link</a> 
</ul>

來源

2015-03-05 16:15:27 user1708899

iPad上的典型CSS菜單下拉懸停問題

回答

相關問題