Question

我可以帮忙吗？

当我点击.toggle-menu时，如果#overlay-menu和#overlay-contact :visible或ovDeskVisible == false >

if (ovDeskVisible == false && ovMenuVisible) {
            $('#overlay-menu').hide();
            setTimeout(function() {
                $('#overlay-menu').removeClass('appears');
            }, 300 );
        }
if (ovDeskVisible == false && ovContactVisible) {
            $('#overlay-contact').hide();
            setTimeout(function() {
                $('#overlay-contact').removeClass('appears');
            }, 300 );
        }

这是我的功能：

function toggle_nav_desktop() {
    var ovDeskVisible = false;
    var ovMenuVisible = $('#overlay-menu').is(':visible');
    var ovContactVisible = $('#overlay-contact').is(':visible');

    $('.toggle-menu, .toggle-contact').click(function(e) {
        e.preventDefault();
        ovDeskVisible = !ovDeskVisible;

        if ($('html').attr('lang') == 'fr-FR') {
            $('.toggle-menu h4').text($('.toggle-menu h4').text() == 'Menu' ? 'Fermer' : 'Menu');
        } else {
            $('.toggle-menu h4').text($('.toggle-menu h4').text() == 'Menu' ? 'Close' : 'Menu');
        }

        if (ovDeskVisible == true) {
            $('.icon-menu').addClass('is-opened').removeClass('is-closed');
            $('html').addClass('stop-scrolling');
            $('.circle').addClass('open appears');
        }
        if (ovDeskVisible == false) {
            $('.icon-menu').addClass('is-closed').removeClass('is-opened');
            $('html').removeClass('stop-scrolling');
            $('.circle').removeClass('open appears');
        }
    });

    $('.toggle-menu').click(function(e) {
        e.preventDefault();

        if (ovDeskVisible == true) {
            $('#overlay-menu').show();
            setTimeout(function() {
                $('#overlay-menu').addClass('appears');
            }, 300 );
        }
        if (ovDeskVisible == false && ovMenuVisible) {
            $('#overlay-menu').hide();
            setTimeout(function() {
                $('#overlay-menu').removeClass('appears');
            }, 300 );
        }
        if (ovDeskVisible == false && ovContactVisible) {
            $('#overlay-contact').hide();
            setTimeout(function() {
                $('#overlay-contact').removeClass('appears');
            }, 300 );
        }
    });

    $('.toggle-contact').click(function(e) {
        e.preventDefault();

        if (ovDeskVisible == true) {
            $('#overlay-contact').show();
            setTimeout(function() {
                $('#overlay-contact').addClass('appears');
            }, 300 );
        }
    });
}

当我点击.toggle-menu时，如果隐藏#overlay-menu或#overlay-contact :visible和ovDeskVisible == false，该怎么隐藏？

Answer 1

不确定这是否会有所帮助，但会尝试将点击事件从$('.toggle-contact').click(function(e){}更改为$('.toggle-contact').on('click', function(e){}。这一次，解决了我的问题。值得一试。

Answer 2

我显然看不到你的其余代码，但看起来你的脚本应该可行。您是否准备好文档中的toggle_nav_desktop()？

如果没有，请尝试添加：

$(document).ready(function() {
    toggle_nav_desktop();
});

如果这没有帮助，您可以使用HTML和所有内容创建JSfiddle并分享链接吗？

另外，您可以使用not（!）运算符和else语句来显着简化语句：

if (ovDeskVisible) {
    //ovDeskVisible == true
}
else {
    //ovDeskVisible == false
}

if (!ovDeskVisible && ovMenuVisible) {
    //ovDeskVisible == false
    //ovMenuVisible == true
}
else {
    //ovDeskVisible == true
    //ovMenuVisible == false
}

如果变量== true

2 个答案: