jquery : 切换叠加页面和彩色关闭按钮

Question

我创建了一个包含 2 个叠加页面的导航。第一个用于我的菜单，第二个用于联系表格。

第一个问题是单词"Menu"的两种颜色之间的切换。当访问者位于 window 的顶部并单击 "Menu" 时，一切正常。但是当访问者向下滚动页面并再次单击 "Menu" 时，单词的颜色与背景颜色相同。我希望当访问者单击叠加层时，如果背景是棕色，"Close" 按钮颜色变为白色，只有当 class 较小的按钮处于活动状态时，return 按钮颜色变为棕色。

第二个问题是两个叠加层之间的切换。我希望当访问者单击 "Contact" 时，他可以通过单击右上角的 "Close" 来关闭叠加层。问题是什么也没发生 :-/

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 单击处理程序添加了一些代码，以关闭打开的联系人叠加层。我向两个处理程序添加了代码，以将 menu/close 颜色设置为在打开覆盖层时始终为白色，并且在未打开覆盖层时设置为 CSS 通常显示的任何颜色。这是有效的，因为在 JavaScript 中设置的样式会覆盖元素上的任何其他样式。但是，然后擦除 JavaScript 完成的样式会将其重置为正常状态。

jquery : 切换叠加页面和彩色关闭按钮

jquery : toggle overlay page and color close button

jquery

scroll

colors

conflict