響應式jQuery菜單

我創建了一個響應式菜單，分辨率爲480px或更低。如果出現以下情況，我會將其轉到以下位置：響應式jQuery菜單

用戶單擊「菜單」鏈接。
菜單slideToggles out。
子菜單slideToggle出onClick以及。
但是你不能點擊任何頁面。

這是否與返回錯誤有關？

您可以查看這裏的例子：http://www.stlredtails.com/construction/

您可能需要在調整大小的瀏覽器或belw 480像素在行動中看到的響應導航。

這裏是jQuery的爲導航：

jQuery(".navigation ul").hide(); 
jQuery("#navigation").click(
    function() { 
     jQuery(this).siblings("ul").slideToggle(150, "swing"); 
     return false; 
    } 
); 
jQuery(".navigation > ul > li").click(
    function() { 
     jQuery(this).children("ul").slideToggle(150, "swing"); 
     return false; 
    } 
);

謝謝大家！

來源

2012-12-19 Aaron Brewer

適用於Chrome。 –

我實際上在某些尺寸下會遇到不同的錯誤：如果菜單分成幾行但在摺疊到列菜單之前，某些子菜單出現在以下菜單項下。 –

嘗試點擊子菜單項。像使命宣言和董事會一樣。它切換父菜單並將其滑回備份，而無需轉到正確的鏈接。 –

問題出在return false。當你點擊鏈接時，你還點擊了祖先li和ul。在鏈接「激活」之前，綁定到祖先的函數單擊事件執行。由於他們return false阻止了默認的瀏覽器行爲（導航）。

有對這種行爲的菜單更好的解決方案，但使用你有什麼，你已經（並假設你會不會改變你的HTML），你可以簡單地添加以下到您的JavaScript：

$('.navigation').on('click', 'a:only-child', function(e) { 
    e.stopPropagation(); 
});

這會搜索導航菜單中所有鏈接，這些鏈接是其父母的唯一孩子（在這種情況下，恰好是您想要繼續作爲鏈接工作的鏈接），並防止祖先點擊事件執行 - return false shouldn'再也發生不了了。

來源

2012-12-19 02:15:52 banzomaikaka

謝謝你，謝謝你的解釋。但由於某種原因，這會破壞我的代碼。但我不明白爲什麼。 –

嘿亞倫。我想你已經複製了粘貼它，對吧？我在jsfiddle上編寫了代碼，由於某種原因在代碼的末尾放置了一個不可見的字符。如果退格在最後一行的末尾（「}）;」）顯然沒有任何事情會發生，但是您將刪除該字符。從那時起，代碼應該沒有問題地運行。 – banzomaikaka

響應式jQuery菜單

回答

相關問題