Deux menus jQuery, Open One Fermer l'autre, ne jamais avoir les deux ouverts en même temps

Question

J'ai deux menus jquery, un un menu coulissant pour nav et un autre qui est essentiellement juste un champ de recherche. Le problème que je rencontre est que je le veux pour que les deux menus ne soient jamais ouverts simultanément en même temps.

Les deux menus s'ouvrent et se ferment parfaitement en cliquant sur leurs boutons respectifs. Aussi quand je clique n'importe où ailleurs sur la page ferme le (s) menu (s) ouvert (s). Sauf - bien sauf quand disons que le menu nav est ouvert et que je clique sur le bouton de recherche. Ou inversement, quand j'ai le champ de recherche ouvert et je clique sur le bouton de menu de navigation.

Voici jQuery je jusqu'à présent ... toute aide est grandement appréciée ...

$(document).ready(function() { 
    $('.search').click(function(e){ 
     e.stopPropagation(); 
     if ($(this).hasClass('active')) { 
      $('.search_area').fadeOut(1); 
      $(this).removeClass('active'); } 
     else { 
     $('.search_area').fadeIn(1); 
     $(this).addClass('active'); } 
    }); 
    function closeSearch() { 
     $('.search_area').fadeOut(1); 
     $('.search').removeClass('active'); 
     } 
    $(document.body).click(function(e) { closeSearch(); }); 
    $(".search_area").click(function(e) { e.stopPropagation(); }); 
}); 

var slideMenu = $('.panel'); 
var slideMenuWidth = $('.panel').width(); 

$(document).ready(function() { 
    $('.flip').click(function(e){ 
     e.stopPropagation(); 
     if ($(this).hasClass('open')) { 
      slideMenu.animate({ left: -slideMenuWidth }, 300);    
      $(this).removeClass('open'); } 
     else { 
      slideMenu.animate({ left: "0px" }, 300); 
      $(this).addClass('open'); } 
    }); 
    function closeMenu() { 
     slideMenu.animate({ left: -slideMenuWidth }, 300);    
     $('.flip').removeClass('open'); 
     } 
    $(document.body).click(function(e) { closeMenu(); }); 
    $(".panel").click(function(e) { e.stopPropagation(); }); 
}); 

</script> 

Jfiddle

Answer 1

Essayez de vérifier si les éléments ont respectivement la classe open et active et appellent la fonction correspondante comme suit:

$(document).ready(function() { 

    $('.search').click(function (e) { 
    e.stopPropagation(); 
    if ($('.flip').hasClass("open")) closeMenu(); 
    if ($(this).hasClass('active')) { 
     $('.search_area').fadeOut(1); 
     $(this).removeClass('active'); 
    } else { 
     $('.search_area').fadeIn(1); 
     $(this).addClass('active'); 
    } 
    }); 

    function closeSearch() { 
    $('.search_area').fadeOut(1); 
    $('.search').removeClass('active'); 
    } 

    $(".search_area").click(function (e) { 
    e.stopPropagation(); 
    }); 

    var slideMenu = $('.panel'); 
    var slideMenuWidth = $('.panel').width(); 

    $('.flip').click(function (e) { 
    if ($('.search').hasClass("active")) closeSearch(); 
    e.stopPropagation(); 
    if ($(this).hasClass('open')) { 
     slideMenu.animate({ 
      left: -slideMenuWidth 
     }, 300); 
     $(this).removeClass('open'); 
    } else { 
     slideMenu.animate({ 
      left: "0px" 
     }, 300); 
     $(this).addClass('open'); 
    } 
    }); 

    function closeMenu() { 
    slideMenu.animate({ 
     left: -slideMenuWidth 
    }, 300); 
    $('.flip').removeClass('open'); 
    } 

    $(document.body).click(function (e) { 
    closeMenu(); 
    closeSearch(); 
    }); 

    $(".panel").click(function (e) { 
    e.stopPropagation(); 
    }); 
}); 

Updated Fiddle

FYI: Vous n'avez pas besoin de plusieurs gestionnaires ready() ...