jquery：切換覆蓋頁面和顏色關閉按鈕

Question

我創建了一個包含2個覆蓋頁面的導航。第一個是我的菜單，第二個是聯繫表單。

第一個問題是單詞「Menu」的兩種顏色之間的切換。 當訪客在窗口頂部，並點擊「菜單」時，一切正常。但是當訪問者向下滾動頁面並再次點擊「菜單」時，單詞的顏色與背景相同。我希望當訪問者點擊覆蓋圖時，如果背景爲棕色，則「關閉」按鈕顏色將變爲白色，並且只有在較小的類處於活動狀態時纔會返回棕色。

第二個問題是兩個疊加層之間的切換。我希望當訪問者點擊「聯繫人」時，他可以通過點擊右上角的「關閉」關閉覆蓋。問題是，沒有發生： -/

JSFIDDLE

$('#home-menu .toggle-menu').click(function(e) { 
     e.preventDefault(); 
     $('h4.toggle-menu').text($(this).text() == 'Menu' ? 'Close' : 'Menu'); 

     $('#overlay-menu').toggle(); 

}); 

$('#home-menu .toggle-contact').click(function(e) { 
     e.preventDefault(); 
     $('h4.toggle-menu').html($('h4.toggle-menu').html().replace('Menu','Close')); 

     $('#overlay-contact').toggle(); 

}); 


$(window).on('scroll', function() { 
     var scrollTop = $(this).scrollTop(); 

     $('#home-content').each(function() { 
      var topDistance = $(this).offset().top; 

      if ((topDistance-155) < scrollTop) { 
       $('#home-menu').addClass('smaller'); 
      } else { 
       $('#home-menu').removeClass('smaller') 
      } 
     }); 

    }); 

Answer 1

如果我正確理解你的問題，我相信我已經解決了他們this JSFiddle。

這裏是您更新的JavaScript代碼。

$('#home-menu .toggle-menu').click(function(e) { 
     e.preventDefault(); 
     $('h4.toggle-menu').text($(this).text() == 'Menu' ? 'Close' : 'Menu'); 

     if ($('#overlay-contact').is(':visible')) { 
      $('#overlay-contact').toggle(); 
      $('#toggle-menu').css("color", ""); 
     } else { 
      $('#overlay-menu').toggle(); 
      if ($('#overlay-menu').is(':visible')) { 
       $('.toggle-menu').css("color", "#FFFFFF"); 
      } else { 
       $('.toggle-menu').css("color", ""); 
      } 
     } 
}); 

$('#home-menu .toggle-contact').click(function(e) { 
     e.preventDefault(); 
     $('h4.toggle-menu').html($('h4.toggle-menu').html().replace('Menu','Close')); 

     $('#overlay-contact').toggle(); 
     if ($('#overlay-contact').is(':visible')) { 
      $('.toggle-menu').css("color", "#FFFFFF"); 
     } else { 
      $('.toggle-menu').css("color", ""); 
     } 
}); 


$(window).on('scroll', function() { 
     var scrollTop = $(this).scrollTop(); 

     $('#home-content').each(function() { 
      var topDistance = $(this).offset().top; 

      if ((topDistance-155) < scrollTop) { 
       $('#home-menu').addClass('smaller'); 
      } else { 
       $('#home-menu').removeClass('smaller') 
      } 
     }); 

    }); 

我添加了一些代碼到#home-menu .toggle-menu單擊處理程序關閉接點覆蓋，如果它是開放的。而且，我將代碼添加到這兩個處理程序中，以便在覆蓋圖打開時將菜單/關閉顏色設置爲始終爲白色，並且當沒有覆蓋圖打開時，可以使用CSS通常會生成的顏色。這是有效的，因爲在JavaScript中設置的樣式會覆蓋元素上的任何其他樣式。但是，然後擦除由JavaScript完成的樣式將其重置爲通常情況下的樣式。