Bonjour à tous,

J'ai un petit problème de cinématique au niveau d'ouverture d'un conteneur, j’espère que quelqu'un pourra m'aider.

J'ai 2 listes présent dans un conteneur. Au clique sur un menu, je voudrais ouvrir un conteneur qui s'ouvre de gauche à droite et afficher la bonne liste correspondant.

Si le conteneur est déjà ouvert au moment du clique :

-fermer le conteneur (si le clique est sur le même menu demandé).

-fermer le conteneur et le ré-ouvrir avec le bon contenu à la bonne position (si le clique est sur l'autre menu).

Mon problème : quand je veux ouvrir mon conteneur avec la liste1 alors que mon conteneur est déjà ouvert avec la liste2 (ou inversement) --> Je voudrais fermer mon conteneur avec la liste2 puis ré-ouvrir mon conteneur avec la liste1. Or mon conteneur change de position, se referme puis se réouvre avec la bonne liste. J'ai l'impression que $.when(width_promise).done() ne marche pas. Il n'attends pas la fin de la fermeture pour commencer ce bout de code ....

Mon HTML: 

 <div class="conteneur_menu">
            <div class="menu"><a>Menu 1</a>
                <div class="sousmenu sousmenu_1">
                    <div><a>Sous-menu_1_1</a></div>
                    <div><a>Sous-menu_1_2</a></div>
                </div>
            </div>
            <div class="menu"><a>Menu 2</a>
                <div class="sousmenu sousmenu_2">
                  <div><a>Sous-menu_2_1</a></div>
                  <div><a>Sous-menu_2_2</a></div>
                </div>
            </div>
        </div>

        <div class="conteneur_list">
            <div class="list_1">
                <div>list1_1</div>
                <div>list1_2</div>
            </div>
            <div class="list_2">
                <div>list2_1</div>
                <div>list2_2</div>
            </div>
        </div>

Mon JS:

var flag1 = false;
var flag2 = false;

$('.sousmenu_1').on('click', function() {
  //si volet 2 est ouvert
  if(flag2 === true){
    //efface le texte volet 2
      var opacity_promise = $('.list_2').animate({ opacity: flag2?'0':'1' });
      //fermeture du volet 2
      var width_promise = $.when(opacity_promise).done(function(){
          $('.conteneur_list').animate({ width: flag2?'0':'220' });
          flag2=!flag2;
        });
      //ouverture du volet 1
      $.when(width_promise).done(function(){
      $('.conteneur_list').css({ "top":"60px" });
        $('.conteneur_list').animate({ width: flag1?'0':'220' });
        $('.list_1').animate({ opacity: flag1?'0':'1' });
        flag1=!flag1;
    });
  }
  //ouverture du volet 1
  else{
    $('.conteneur_list').css({ "top":"60px" });
    $('.conteneur_list').animate({ width: flag1?'0':'220' });
    $('.list_1').animate({ opacity: flag1?'0':'1' });
    flag1=!flag1;
  }
});
$('.sousmenu_2').on('click', function() {
  //si volet 1 est ouvert
  if(flag1 === true){
    //efface le texte volet 1
      var opacity_promise = $('.list_1').animate({ opacity: flag1?'0':'1' });
      //fermeture du volet 1
      var width_promise = $.when(opacity_promise).done(function(){
          $('.conteneur_list').animate({ width: flag1?'0':'220' });
          flag1=!flag1;
        });
      //ouverture du volet 2
    $.when(width_promise).done(function(){
      $('.conteneur_list').css({ "top":"120px" });
        $('.conteneur_list').animate({ width: flag2?'0':'220' });
        $('.list_2').animate({ opacity: flag2?'0':'1' });
        flag2=!flag2;
    });
  }
  //ouverture du volet 2
  else{
    $('.conteneur_list').css({ "top":"120px" });
      $('.conteneur_list').animate({ width: flag2?'0':'220' });
      $('.list_2').animate({ opacity: flag2?'0':'1' });
      flag2=!flag2;
  }
});

Mon CSS:

.conteneur_list {
  position: absolute;
  left: 170px;
  top: 1px;
  height: 100px;
  width: 0px;
  background: grey;
  z-index: 2;
   }
.list_1 {
  opacity: 0 
}
.list_2 {
  opacity: 0
}

Des idées pour corriger ce problème ?

Merci pour votre aide.

Personne n'a une idée ?