jquery：切换覆盖页面和颜色关闭按钮答案

【问题标题】：jquery : toggle overlay page and color close buttonjquery：切换覆盖页面和颜色关闭按钮
【发布时间】：2015-12-26 05:23:34
【问题描述】：

我创建了一个带有 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')
            }
        });

    });

【问题讨论】：

标签： jquery scroll colors conflict

【解决方案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 完成的样式会将其重置为正常状态。

【讨论】：