在两个元素之间切换菜单

Toggle menu between two elements

本文关键字：之间 菜单 元素 两个      更新时间：2023-09-26

我需要帮助。

我写了这样的代码:JSFIDDLE

当我点击汉堡包图标，工作正常，菜单打开和关闭良好。当我点击"联系人"时，也可以正常工作。我可以关闭"覆盖联系人页面"与汉堡包图标(谁代表一个十字)或再次点击"联系人"。

但是当我点击汉堡包图标(这是打开菜单)然后我再次点击联系人，这是不正常的:

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();
});

试试这个:

$('.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();
});
相关文章：