如何在第一次觸摸時打開下拉列表，然後按照第二步上的鏈接 - jquery？

Question

我試圖讓下拉菜單在基於觸摸的設備上正常工作。該菜單在點擊時可以正常打開，但由於父元素也是鏈接，因此它會在用戶選擇下拉菜單之前將鏈接帶到鏈接。

是否有辦法讓這個（僅在觸摸設備）的父元素的第一次輕觸打開下拉和第二次點擊帶給你的聯繫？

我有HTML和CSS但真正的JavaScript沒有，所以請的解決方案是基於腳本儘可能描述有很好的瞭解。

謝謝

Answer 1

這可能有所幫助。如果你有一個鏈接

<a href="#">your drop down menu</a>我的意思是添加#到href

或者做到這一點在JavaScript

var link = $('.menu').find('a'); 

$(document).on('touchstart', link, function (e) { 
    e.preventDefault(); 
    //do your stuff 
}); 

Answer 2

function createMenu(menuName,menuTitle,menuEntries,left,width) { 

numEntries = menuEntries.length; 

document.write('<div class="menuTitle" style="left:0px; width:100px;"'); 
document.write('onMouseover="menuToggle(\'' + menuName + '\');"'); 
document.write('onMouseout="menuToggle(\'' + menuName + '\');">'); 
document.write(menuTitle); 
document.write('</div>'); 

    document.write('<div id="myMenu" class="menu" style="left:0px; width:100px;"'); 
    document.write('onMouseout="menuToggle(\'' + menuName + '\')">'); 
    for (i = 0; i < numEntries; i++) { 
     document.write('<a href="' + menuEntries[i].url + '" class="menuEntry">' + menuEntries[i].entry + '</a><br>'); 
    } 
    document.write('</div>'); 

} 

    function menuToggle(target) { 

    targetMenu = (document.getElementById) ? document.getElementById(target).style : eval("document." + target); 
    targetMenu.top = (parseInt(targetMenu.top) == 22) ? -2000 : 22; 

    } 
    // --> 
    </script> 

這是用於創建滴鼠標時，下拉菜單的JavaScript是在它的上面 - 它來自於一本名爲的書，由Arman Danesh編寫的10個簡單步驟或更少的。他是一位偉大的作家，可能會比我更好地解釋這一點 - 但是這裏卻是如此。

你正在做的是建立與預定義變量的函數，如在申報（）。行numEntries ...將變量numEntries的值設置爲預定義變量menuEntries的長度。換句話說，（在這個例子中，編程的條目數是3，numEntries = 3），但是你編碼的條目是numEntries的值。

的文件撰寫的東西可能看起來混亂，但它只是JavaScript代碼，持有的HTML代碼，因爲只是把股利它自己會打破，因爲你把這個腳本標籤的程序。如果你在任何時候都不理解我，只要問一下，我會告訴你什麼是教科書，當我以後對我有什麼。

這是處理的第一功能，第二是什麼使鼠標懸停在菜單下拉。我不知道如何在不引用這本書的情況下清楚地向你解釋這一點，但如果你需要我解釋它，我會嘗試。如果您需要HTML代碼來顯示菜單，我可以給你整個例子，我已經在我的電腦上。

希望這有助於和請只問，如果你需要我去了什麼。我會繼續研究如何改變它的觸摸屏爲您X

Answer 3

在DoubleTapToGo看看：

「當您點擊首次父項，DoubleTapToGo阻止瀏覽器打開一個新的網址，但如果連續再次點擊，則允許該網址。「

http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly

Answer 4

$('.has-sub').on("touchstart", function (e) { 
var submenu = $(this).find('ul').first(); 
var link = $(this); //preselect the link 
if (link.hasClass('hover')) { 
     link.removeClass('hover'); 
     $(submenu).slideUp(0); 
     e.stopPropagation() 
     return true; 
} else { 
     $(submenu).slideDown(0); 
     link.addClass('hover'); 
     e.stopPropagation(); 
     return false; //extra, and to make sure the function has consistent return points 
} 

}）;