Question

我需要一些帮助。

我写了这段代码：JSFIDDLE

当我点击汉堡图标时工作正常，菜单打开和关闭。当我点击＆＃34;联系＆＃34;这也很好。我可以关闭＆＃34;重叠联系页面＆＃34;使用汉堡图标（代表十字架）或再次点击＆＃34;联系＆＃34;。

但是，当我点击汉堡包图标（确定打开菜单）然后我再次点击＆＃34;联系＆＃34;，那就不行了：

1 > the hamburger icon isn't a cross
2 > if I click again on "Contact" I would like to close the "Overlay contact page"

你能帮我吗？

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

    $('.icon-menu-mobile').toggleClass('is-opened is-closed');

    if ($('#overlay-contact-mobile').is(':visible')) {
        $('#overlay-contact-mobile').toggle();
    } else {
        $('#overlay-menu-mobile').toggle();
    }
});

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

    $('.icon-menu-mobile').toggleClass('is-closed is-opened');

    $('#overlay-contact-mobile').toggle();

});

Answer 1

试试这个：

$('.toggle-menu-mobile').click(function() {
    $('.icon-menu-mobile').toggleClass('is-opened');
    $('#overlay-menu-mobile').slideToggle();
    $('#overlay-contact-mobile').slideUp();
});

$('.toggle-contact-mobile').click(function() {
    $('.icon-menu-mobile').removeClass('is-opened');
    $('#overlay-contact-mobile').slideToggle();
    $('#overlay-menu-mobile').slideUp();
});

切换两个元素之间的菜单

1 个答案: