jQuery slideToggle() question

Question

Je travaille sur une navigation qui a une version mobile et de bureau. La mise en page est très bien et pour la plupart la fonctionnalité fonctionne, mais j'ai un problème avec slideToggle(). Lorsque l'écran est en dessous de 768 par exemple, le bouton d'expansion de la navigation apparaît et un clic sur un bouton bascule la navigation principale pour fermer la navigation sur le mobile. Quand je redimensionnez la fenêtre en cliquant sur la principale navigation continue à basculer, même si elle est au-dessus 768.

Toute aide est appréciée :)

HTML

<nav> 
    <ul class="mobileNav"> 
     <li>Expand</li> 
    </ul> 
    <ul class="mainNav"> 
     <li class="">Item1</li> 
     <li class="">Item2</li> 
     <li class="">Item3</li> 
     <li class="">Item4</li> 
    </ul> 
</nav> 

jQuery

$(document).ready(function() { 
    var expand = $('.mobileNav li'); 
    menu = $('.mainNav'); 

    $(expand).click(function() { 
     var width = $(window).width(); 

     if (width < 768) { 
      menu.slideToggle(); 

      $('.mainNav li').click(function() { 
       menu.slideUp(); 
      });   
     } 
    });  
}); 

Answer 1

Il y a deux problèmes ici.

1. Vous ne devriez pas enregistrer l'événement, cliquez sur un autre gestionnaire d'événements de clic, il fera le gestionnaire d'événements, cliquez pour exécuter plusieurs fois
2. Vous ne vérifiez pas la largeur à l'intérieur du deuxième gestionnaire de clic

essayez

$(document).ready(function() { 
    var expand = $('.mobileNav li'); 
    menu = $('.mainNav'); 

    $(expand).click(function() { 
     var width = $(window).width(); 
     if (width < 768) { 
      menu.slideToggle(); 
     } 
    });  
    $('.mainNav li').click(function() { 
     if (width < 768) { 
      menu.slideUp(); 
     } 
    });   
}); 

Answer 2

Vous avez besoin d'un autre événement pour la fenêtre redimensionne

$(window).resize(function() { 
    var width = $(window).width(); 
    if (width > 768) { 
     menu.show(); 
    } 
}); 

Answer 3

Ajouter suivante css pour activer div

width:100%!important; 

Raison: Bien qu'il n'y ait pas de largeur définir la slideToggle fera la largeur et la hauteur à 0 et display: none

et le mode d'expansion, il fera visa inversement, la largeur va augmenter à la largeur div parent, le contenu est en expansion et la hauteur à cette position est supérieure à ce qui est nécessaire à l'étape finale

lorsque la largeur est finalement atteinte à 100%, la hauteur sera réinitialisée à ce dont elle avait besoin