CSS下拉菜單 - 不能點擊鏈接

我用下面的網站CSS-下拉菜單： Website CSS下拉菜單 - 不能點擊鏈接

您可以測試在頂部菜單項的菜單。在桌面上一切正常。但在iPhone或iPad上不行。在那裏你可以點擊其中一個頂級菜單項。然後下拉菜單打開沒有問題。但是，如果我點擊下拉菜單中的某個鏈接，則不會發生任何事情。

這是下拉菜單的CSS代碼：

#mainmenu ul li > ul { 
    display: none; 
    top: 0px; 
} 
#mainmenu ul li:hover > ul, 
#mainmenu ul li:active > ul, 
#mainmenu ul li:focus > ul, 
#mainmenu ul li > a#aktuell + ul { 
    display: block; 
    z-index: 9999; 
}

你有一個想法，爲什麼不呢？

來源

2013-09-25 lackner_media

如何使用懸停選擇器觸發下拉菜單，在ipad或iphone點擊事件相當於單擊並懸停，因此下拉菜單無效 – Sudharsun

我添加了代碼。我試着使用：懸停，：主動和：重點。但沒有什麼作用 –

正如我告訴你的單擊事件相當於點擊，懸停，重點，所以沒有什麼會工作嘗試我的回答 – Sudharsun

好的，下拉菜單是通過懸停事件觸發的。正如我之前在評論中所說的那樣，在觸控設備中，點擊事件相當於點擊和懸停，因此它不會直接工作。

如果懸停菜單項沒有鏈接，解決辦法是：

導入近代化你的代碼：http://modernizr.com/
通過JavaScript轉換懸停到雙擊：

$（'。mainmenu'）。doubleTap（function（）{ $（this）.toggleClass（'hover'）;
}）;
添加class="mainmenu"到列表項

希望這有助於

來源

2013-09-25 14:16:38 Sudharsun

感謝您的答案 - 但這對我不起作用。我已經集成了modernizr，jquery和javascript，並將類「mainmenu」添加到菜單的ul-tag –

將該類添加到已懸停事件的列表項目 – Sudharsun

現在我已將它添加到此列表項 - 但是相同錯誤 –

JavaScript解決方案之

var nav = document.getElementById('nav'); 
var els= nav.getElementsByTagName('li'); 
for(var i = 0; i < els.length; i++){ 
    els[i].addEventListener(’touchstart’, function(){this.className = 「hover」;}, false); 
    els[i].addEventListener(’touchend’, function(){this.className = 「」;}, false);

其中NAV是保存MEMU的div ID

jQuery的解決方案

$('#nav li').bind('touchstart', function(){ 
    $(this).addClass('hover'); 
}).bind('touchend', function(){ 
    $(this).removeClass('hover'); 
});

CSS

li:hover, li.hover { /* whatever your hover effect is */ }

希望這個作品

來源

2013-09-25 14:50:01 Sudharsun

好吧我試過這個解決方案與jQuery。我已經集成了這段代碼（但將#nav更改爲.menu）。我已將li.hover添加到下拉菜單可見的那一行（#mainmenu ul li：hover> ul，#mainmenu ul li> a＃aktuell + ul，#mainmenu ul li.hover> u）。但沒有成功 - 再次出現同樣的錯誤。 –

好吧，讓我們看看是否有任何其他解決方案 – Sudharsun

獲取jsFiddle中的菜單代碼 – Sudharsun

這就是解決方案

$('#menu li ul li a').bind('touchstart', function(){ 
     var href = $(this).attr('href'); 
     location.href = href; 
})

來源

2014-08-28 10:37:39

謝謝！它對我有效 – pikk

嘛，只是一種嘗試。嘗試把在「<一>標籤」下面的代碼

onClick=」return true」

很簡單，它是爲我工作。

來源

2015-10-20 18:32:57

CSS下拉菜單 - 不能點擊鏈接

回答

相關問題