JQuery Diaporama événement et Div hauteur ne change pas comme prévu

Je travaille avec JQuery et je suis en train de changer le code HTML d'une boîte div lorsque les diapositives div enfant dans et hors. Mon problème est que le code ci-dessous ne change pas la valeur html de # menuenu. Il affiche uniquement le menu Masquer et ne détecte pas la hauteur réelle telle que modifiée par slideToggle.JQuery Diaporama événement et Div hauteur ne change pas comme prévu

$('#menu').click(function() { 
    $('#menu_links').slideToggle('slow', function(){ 

    console.log('Debug : %s', $('#menu_links').height()); 

    if ($('#menu_links').height() == 1) 
    $('#menu_text').html("Show Menu"); 
    else if ($('#menu_links').height() == 20) 
    $('#menu_text').html("Hide Menu"); 

    }); 
});

Lors de l'inspection dans la console Firebug, la valeur de la hauteur ne change jamais de 20 à moins que vous cliquez sur le div vraiment rapide plusieurs fois, puis il passera à 1. (Je dois ajouter que la hauteur définie dans la feuille de style est 20)

le doc dit que slideToggle affecte uniquement la hauteur de l'objet. Est-ce que je manque quelque chose? Merci pour l'aide.

<div id="menu"><p id="menu_text">Show Menu</p> 
    <div id="menu_links"> 
      Stuff 
    </div> 
</div>

Source

2009-11-15 Jeremy Lyman

Donc la hauteur ne change pas lors de l'inspection dans Firebug. Est-ce que les éléments du menu glissent dans et hors? Quelle est ta question? –

L'élément de menu glisse dans et hors, mais le html ne change pas. Ma conjecture est que parce que le .height() de la div ne change pas de 20 quand il devrait être. –

Avant de mettre l'instruction conditionnelle à l'intérieur du rappel pour slideToggle, je l'avais en dehors de slideToggle et mettre 2 diapositives dans l'instruction bascule conditionnelle. Ce que j'ai vu alors était la valeur changeant de 20 à 1 et arrière mais il ne changeait pas le HTML comme si il ne me donnait pas les bonnes valeurs pour la taille. Ensuite, j'ai bricolé avec pour mettre l'instruction conditionnelle à l'intérieur du rappel et c'est ce que je suis parti avec. La valeur de la hauteur devrait changer, ne pas rester à 20, car la diapositive fonctionne réellement. –

Essayez:

$('#menu').click(function(){ 
    $('#menu_links').slideToggle('slow', function(){ 
     $('#menu_text').html($('#menu_links:visible').length ? "Hide menu" : "Show menu"); 
    }); 
});

Il vous fixerez le texte du menu en fonction de si l'élément de liens est visible ou non. Vous êtes probablement mieux de ne pas en fonction des hauteurs et des largeurs de l'élément, comme dans le pire des cas, ils peuvent varier d'un navigateur à (et dans ce cas, ils changent aussi en fonction du contenu de l'élément de liens).

Source

2009-11-15 22:22:26

Merci. Je n'ai pas réalisé qu'il y avait un sélecteur visible pour l'action jquery. Apprendre quelque chose de nouveau chaque jour. –

Vous pouvez également utiliser des données() pour enregistrer votre état. C'est une bonne astuce pour sauver l'état ou quoi que ce soit

$('#menu').click(function() { 
    $('#menu_links').slideToggle('slow', function(){ 

    var $this = $(this); 
    var toggled = $this.data('toggled'); 
    if (toggled) 
    $('#menu_text').html("Show Menu"); 
    else 
    $('#menu_text').html("Hide Menu"); 
    $this.data('toggled', !toggled) 

    }); 
});

Source

2009-11-15 22:36:10 Ben

Merci, j'aurais détecté une sorte de changement d'état au lieu des valeurs réelles de ce qu'elle pourrait être. –

JQuery Diaporama événement et Div hauteur ne change pas comme prévu

Répondre

Questions connexes