關閉關閉帆布導航時菜單項點擊

http://darrenbachan.com/playground/diamond-hand-car-wash/index.html 關閉關閉帆布導航時菜單項點擊

有幾件事情，我想在這裏完成：

當您單擊除了菜單項的任何地方它會關閉導航
當您點擊一個菜單項，它會關閉導航欄並將動畫添加到ID

畫布外導航僅顯示在其移動視圖中。如果您在桌面上查看網站，導航會將您的動畫製作爲特定的ID，所以我在那裏有一些我猜測可以用於非畫布的js。我讀過一些文章，說使用數據切換，但我無法讓它工作。

2016-04-23 Darren Bachan

你好。當你在這裏問stackoverflow你應該提供你的代碼讓我們來處理它。 – Enrico

所以我想我會在這裏提供一些解決方案。如果您只是試圖關閉當前有人點擊菜單中的某個鏈接時所用的菜單，則可以非常簡單地使用點擊功能單擊菜單按鈕，您可以在其中像這樣：

$('.navbar-collapse li a').on('click', function(){ 
    $('input.checkbox-toggle').click(); 
});

或者你很可能只是刪除的複選框選中，像這樣：

$('.navbar-collapse li a').on('click', function(){ 
    $('input.checkbox-toggle').prop('checked', false); 
});

你可能想，如果語句添加的，因此只發生在手機屏幕尺寸，以便像下面這樣：

$('.navbar-collapse li a').on('click', function(){ 
    if($(window).width() <= 767){ 
    $('input.checkbox-toggle').prop('checked', false); 
    } 
});

反之亦然，點擊功能也可以切換點擊。

然後你可以使用你已經有的滾動腳本，並且所有的東西都應該按照你想要的那樣工作。

或者

我看到你已經在使用引導您的網站。 Bootstrap有一個內置的插件，它被稱爲scrollspy，可處理一個頁面設計，讓您可以滾動到各種部分和該類型的內容。使用此代替腳本可能會更簡單一些，並且會更好地爲您提供服務，因爲它將處理替換導航欄中的活動類。對於您試圖通過您的網站實現的目標可能會更好。

另外在底部，我已經放置了一個jsfiddle演示的鏈接，該演示使用scrollspy以及與您在上面的站點中使用的基本相同的畫布菜單，除了您可以只使用一個菜單和移動屏幕，而不是在您的網站上放置兩個菜單。看看這個小提琴演示，它有滾動的地方，就像我說的，而不是使用兩個菜單，它只是在手機屏幕上重新設置了畫布菜單，並使用jquery在按下菜單按鈕時將類切換到主體.menu-open。

我不太確定你是否想要相同類型的疊加樣式的菜單，所以我將它與上面鏈接的網站做了類似，但是如果你希望它是不同類型的非帆布樣式，那麼你可以改變CSS來從左邊或右邊或任何地方切換。

這裏是小提琴JSFiddle Demo

鏈接無論如何希望這一切都有助於如果您有任何疑問，請隨時在下面評論。

P.S我注意到當你看到你的頁面源時，你有.container流體包裝.containers整個頁面。這根本不是必須的，而且很可能導致底部的水平滾動條。我不確定，但我只是想我會指出這一點給你。

來源

2016-04-23 09:11:37

非常感謝！我要試一試這個代碼。我把容器放進去，因爲我想要的內容有一個最大寬度，但坐在100％的容器中，就是容器。也許我必須更多地處理我的標記。再次感謝。 –

好的，我試圖破譯這裏的代碼。我確實喜歡鏈接如何激活，具體取決於您是否在ID中。我試圖弄清楚我是否可以使用當前標記替換您的.menu-open類。至於你使用我的代碼的解決方案，菜單不會關閉，當我點擊菜單項。 –

是的，我無法得到這個工作。 –

關閉關閉帆布導航時菜單項點擊

回答

相關問題