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完成的样式将其重置为通常情况下的样式。