單擊菜單項時關閉畫布導航

Question

http://darrenbachan.com/playground/diamond-hand-car-wash/index.html

我要在這里完成的幾件事：

1. 當您單擊除菜單項以外的任何位置時，它將關閉導航
2. 當您單擊菜單項時，它將關閉導航並設置動畫到ID

畫布導航僅出現在其移動視圖中。 如果您在桌面上查看該站點，則導航會為您設置一個特定的ID，因此我在那發現有一些js可用於非畫布js。 我讀過幾篇文章說要使用數據切換，但無法正常工作。

Answer 1

因此，我想我會對此加以介紹，並提供一些解決方案。 如果當有人單擊菜單中的鏈接時，如果您只是想關閉當前已存在的菜單，則可以很簡單地使用單擊功能來單擊菜單按鈕，就像這樣：

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

或者，您可以像這樣從復選框中刪除選中的內容：

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

您可能需要添加一個if語句，以便它僅在移動屏幕尺寸下發生，如下所示：

$('.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演示的鏈接

無論如何希望這對您有所幫助，如果您有任何疑問，請在下面發表評論。

PS：在查看頁面源時，我注意到整個頁面中都有.container-fluid包裝的.containers。 這一點根本沒有必要，而且很可能導致底部的水平滾動條。 我不確定，但我只是想向您指出這一點。