Question

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

第一个问题是在“菜单”一词之间切换两种颜色。当访客在窗口顶部并点击“菜单”时，一切正常。但是当访问者向下滚动页面并再次单击“菜单”时，该单词的颜色与背景相同。我希望当访问者点击叠加层时，如果背景为棕色，则“关闭”按钮颜色变为白色，只有当较小的类处于活动状态时才返回棕色。

第二个问题是两个叠加层之间的切换。我希望当访问者点击“联系人”时，他可以通过点击右上角的“关闭”来关闭叠加层。问题是什么都没发生： - /

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

jquery：切换叠加页面和颜色关闭按钮

1 个答案: