點擊關閉手機菜單？

我在設計一個響應式網站，可以查看here並使用jQuery slimMenu提供可在特定中斷點初始化的可摺疊導航菜單。我想強制菜單在用戶點擊一個鏈接後重新崩潰，我試圖找出最好的方法來做到這一點。我發現this StackOverflow thread通過建議創建一個附加的單擊事件來提示菜單關閉來解決類似的問題。點擊關閉手機菜單？

因此，我想我可以換一個檢查，看看是否響應菜單已被觸發如下的另一個功能：

// collapse slimmenu on click 
$(window).resize(function(){  
    if ($(".menu-collapser").css("display") == "block"){ 
     $(".nav").on("click", "li", function() { 
     $(".collapse-button").click(); 
     }); 
    } 
});

很明顯我的代碼中某種錯誤的，因爲它是創造時髦在Firefox中導致摺疊/響應菜單崩潰並在最終關閉之前打開好幾次，或者根本沒有在Chrome中關閉。我在這裏做錯了什麼？還是有一種完全不同的方法來強制菜單關閉後點擊，這將是優於這一個？感謝您的幫助。

來源

2014-02-26 nickpish

$（窗口）.resize（）真的是敏感的，所以設置在$（窗口）.resize事件偵聽器（）是不可取的。因爲事件監聽器被設置很多次。

你應該之外設置的事件偵聽一次，這是我會怎麼做，

// collapse slimmenu on click 
$(window).resize(function(){  
    if ($(".menu-collapser").css("display") == "block"){ 
     $(".nav").addClass("mobile"); 
    } else { 
     $(".nav").removeClass("mobile") 
    } 
}).resize(); 

$("body").on("click", ".mobile li", function() { 
    $(".collapse-button").click(); 
});

更新時間：對不起，我分享了錯誤的代碼與你，如果你設置$（」移動。「）.on（）實際上沒有設置，因爲在init時沒有任何移動類的元素。

所以你應該處理身體點擊on(".mobile li")這將解決問題。

還有一件事，不要忘記在document.ready上觸發調整大小，如果有人在手機中打開您的網站，移動類將永遠不會被設置，因爲啓動時沒有調整大小事件。

來源

2014-02-26 22:31:02 ocanal

感謝您的回覆;我正在嘗試你的方法，因爲某些原因，它似乎沒有工作。我可以在Firebug中看到正在添加「移動」類，但點擊功能似乎沒有效果。我想知道我的util.js文件中是否存在其他問題？（我用你的代碼更新了我的網站，所以可以看到。） – nickpish

嗨ocanal我正在意識到其他解決方案存在問題，我試圖實現你的，但它仍然給我提出問題。我希望你能看看我上面更新的鏈接，看看有什麼可能導致這個問題？謝謝！ – nickpish

我已經更新了我的答案。 – ocanal

看來你的問題很容易解決。因爲菜單點擊後你的菜單被摺疊了，你不需要檢查任何東西。它對.nav元素的li是一個簡單的綁定事件。

$(".nav li").on("click", function(){ 
     $(".collapse-button").click(); 
    } 
});

當然，這是假設你點擊（）函數密切

來源

2014-02-26 22:25:20 mrpanda

這個伎倆！謝謝！ – nickpish

點擊關閉手機菜單？

回答

相關問題