Sélectionnez un élément de menu avec un sous-menu, puis masquer les éléments du menu principal

Question

J'essaie de créer un système de menus mobile pour mobile. Si vous cliquez sur 'item 4 du menu', les éléments du menu principal obtiennent 'display none', ce qui est ce que je veux, mais je veux ensuite cliquer sur 'item de menu 4' pour les réactiver que je ne peux pas sembler travailler:

exemple ici: http://jsfiddle.net/zidski/g3jkgyhy/

$("#menu-icon").on("click", function(){ 
    $("#sb-navigation").slideToggle(); 
    $(this).toggleClass("active"); 

    setTimeout(function(){ 
     $('#level1').hide(); 
    }, 500); 
    $('.item').css('display', 'block'); 
    }); 

$("#submenu").on("click", function(){ 
    $("#level1").slideToggle(); 
    $(this).toggleClass("active"); 

    var v = $(this).toggleClass("active"); 
    var j = $('#sb-navigation nav ul li.item'); 

    if ($('#level1').is(':visible')){ 
     $(j).css('display', 'none'); 
     //alert('test'); 
    }else { 
     $(j).css('display', 'block'); 
    } 
    }); 

Answer 1

Voir http://jsfiddle.net/g3jkgyhy/1/

Vous devez changer

$("#level1").slideToggle() 

à

$("#level1").slideToggle(function() { 

slideToggle prendre ce rappel fait, ce qui est quand vous devez vérifier: visible. Lorsque vous appelez simplement slideToggle() et continuez avec le code, vous atteignez votre is: visible check avant que slideToggle ne termine son exécution, donc la visibilité de # level1 est toujours vraie.