懸停觸摸設備

我使用以下着名的CSS代碼來獲取網頁上的下拉菜單。懸停觸摸設備

div#menu ul ul { 
    display: none; 
} 
div#menu ul li:hover ul { 
    display: block; 
}

菜單是一個包含另一個u-list的u-list。當鼠標懸停在此菜單中的列表項目上時，第二個u-list變得可見。列表項目沒有鏈接，只是文本。

這適用於現代瀏覽器。我有一個JavaScript forge for IE6。

但是，它不適用於觸摸設備。

在iPad上沒有任何反應，即使我按下列表項。這可能是因爲列表項不是錨點。或者，也許，我需要一個點擊事件來解決這個問題。

在Android瀏覽器上，長按列表項可打開子菜單。但是，可以選擇子菜單中的鏈接。

任何人都可以幫助我嗎？

在情況下，你需要詳細資料（並有時間），看看

http://www.rene-grothmann.de/musica-aliter-test/

感謝。

來源

2011-08-09 Rene

我會建議考慮使用一些Javascript和顯示菜單觸摸。懸停菜單在觸摸設備上使用時不必要的困難。 –

嘗試嵌套列表元素這樣的：

<ul> 
    <li><a href="#">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> 
    <li> 
    more links here, if you wish. 
    </li> 
</ul>

不應該有與懸停狀態的問題。應該在任何設備上正常工作。以免它對我有用。

來源

2011-08-09 17:18:04 Hyperpedro

是的，沒關係，但是我想知道一個更標準的方法，但是爲了獲得正確的行爲，必須將列表項鍊接起來聽起來很奇怪。如果我發現，我在這裏張貼。謝謝。 – Rene

div#menu ul li:hover ul需要成爲div#menu ul li:active ul，因爲它在觸摸設備上響應，因爲它們不支持懸停狀態。

來源

2011-08-09 15:54:55

這不起作用。在桌面上，菜單不能再使用，而在Android上，活動狀態確實是奇怪的事情，但不能打開菜單。 – Rene

它不能在桌面上工作，我相信你需要添加媒體查詢，然後定位觸摸設備。它不會打開菜單，因爲'：active'只在人的手指觸及'ul'時才起作用。我認爲你最好的選擇是使用JavaScript將'display'改爲'display：block;'。 –

我認爲你的列表項應該是鏈接。你至少應該嘗試一下，如果有效的話。

來源

2011-08-09 16:02:16 Hyperpedro

是的，我試過了。它適用於Android。我無法在iPad上測試，因爲我現在沒有任何權利:-(但在Android上，我不喜歡該解決方案，因爲它會重新加載整個頁面（打開菜單）並將其放回到左上角。菜單確實保持打開狀態，準備好點擊了。 – Rene

懸停觸摸設備

回答

相關問題