如何使頂級下拉菜單項可點擊

Question

我在Shopify中創建商店，並將導航欄設置爲下拉菜單。 單擊導航鏈接將只顯示或隱藏下拉菜單，但我需要的是在第一次單擊時顯示，然後單擊父級鏈接將會跟隨該鏈接（例如，我家的項目會下降，但我實際上並不能回家，並且需要它作爲一個下拉項）。

HeaderView.prototype.events = { 
"click .main-nav .dropdown > a": "toggleMenu", 
}; 


HeaderView.prototype.toggleMenu = function(e) { 
    var dropdown; 
    e.preventDefault(); 
    dropdown = this.$(e.target).closest(".dropdown"); 
    if (!this.$(e.target).closest(".dropdown-nav").length) { 
    this.$(".dropdown").not(dropdown).removeClass("active"); 
    return dropdown.toggleClass("active");} 
}; 

顯然e.preventDefault從工作停止的聯繫，但我不知道如何使它得到第一次點擊時有活動的類，然後允許在下拉菜單可見時遵循鏈接。它適用於懸停，但不適用於觸摸設備。 任何幫助/建議，將不勝感激，謝謝。

Answer 1

您只需在第一次點擊時調用e.preventDefault（）。否則就像你說的那樣，阻止它工作。

試試這個：

HeaderView.prototype.toggleMenu = function(e) { 
    var dropdown; 
    dropdown = this.$(e.target).closest(".dropdown"); 
    if (!this.$(e.target).closest(".dropdown-nav").length) { 
     e.preventDefault(); 
     this.$(".dropdown").not(dropdown).removeClass("active"); 
     return dropdown.toggleClass("active"); 
    } 
}; 

Answer 2

感謝您的答覆，我正沿着同樣的思路去和傷口了一個簡單的，「如果類是主動防止默認」類型的語句。

if (!this.$(".dropdown").hasClass("active")){ 
e.preventDefault(); 

所以基本上，如果下拉顯示，允許鏈接，如果沒有顯示，阻止它; 因此如果下拉菜單是「打開」的，則保持最高級別爲鏈接。

HeaderView.prototype.toggleMenu = function(e) { 
    var dropdown; 
    dropdown = this.$(e.target).closest(".dropdown"); 
    if (!this.$(".dropdown").hasClass("active")){ 
    e.preventDefault(); 
    if (!this.$(e.target).closest(".dropdown-nav").length) { 
    this.$(".dropdown").not(dropdown).removeClass("active"); 
    return dropdown.toggleClass("active");} 
    } 
};