兩個元素之間的切換菜單

Question

我需要一些幫助。

我寫了這個代碼：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(); 

}); 

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