Undesired « clignotant » dans le menu déroulant Jquery?

Question

J'ai la pièce suivante de Jquery:

$("#collapse-menu > li > a").click(function() {
    $(this).toggleClass("expanded").toggleClass("collapsed").find("+ ul").slideToggle("medium");
});

Ce qu'il fait est essentiellement Développe ou réduit un menu de « listes » qui contiennent des listes déroulantes (exemple simplifié) imbriqués:

<ul id="collapse-menu">
   <li><a class="expanded">Basic Details</a>
      <ul>
         <li>
            <select> .... </select>
         </li>
         <li>
            <select> .... </select>
         </li>

Le code fonctionne tout à fait bien, sauf quand une grande valeur est sélectionnée dans l'une des listes déroulantes. À ce moment-là, lorsque vous cliquez dessus, le menu encore / déplier correctement mais « flash » rapidement tout en faisant, comme si l'élément a été entièrement remise à zéro étant en quelque sorte. Les données lui-même est très bien, mais il est le clignotement qui est indésirable.

La chose étrange est que si une petite valeur est sélectionnée dans un menu déroulant, il n'y a aucun clignotement. Lorsqu'une grande valeur est sélectionnée (par exemple, au-dessus 30 dans un menu déroulant d'âge de 18-99), le clignotement commence à se produire.

Quelqu'un peut-il me dire pourquoi cela se passe? Ou s'il y a quelque chose ne va pas sur le Jquery qui cause cela.

Merci.

Mise à jour:

Ajout d'une prime à cela. Ont essayé quelques plugins similaires / solutions là-bas sur le net, mais ils semblent tous souffrir de ce problème « clignotant » lorsque de grandes valeurs sont sélectionnées par déroulantes défaut.

Si elle aide, voici une solution similaire typique: http://www.i-marco.nl/weblog/jquery-accordion-menu/index_collapsed.html# ... mais il souffre du même problème lorsque des listes déroulantes sont ajoutés à l'intérieur de l'accordéon.

J'espère que quelqu'un a une solution propre, au lieu d'avoir besoin de pirater ce en quelque sorte.

Answer 1

De mon observation: La question semble dépendante du système d'exploitation. Les sélections sont peints par le système, car ils sont les commandes du système. Sur ma machine Linux j'éprouve aucun problème avec clignotement animation dans le http://jsbin.com/ixake exemple. Je pense que vous le testiez sous Windows (r)

Il semble que la sélection est « défile » à la valeur appropriée à chaque fois qu'il est repeint. Et cela se produit beaucoup en animant.

La solution la plus simple serait de remplacer le système sélectionne avec sélectionne sur la base HTML pour éliminer la dépendance du système. Il y a des plugins jquery discrets qui le fera pour vous.

Essayez cette ou choisir une de si ce premier était pas trop bon.

Après que votre animation ne devrait dépendre que JS et le style.

Answer 2

Je pense que le problème est que chaque fois que l'élément est redimensionné les rouleaux de liste déroulante à l'élément sélectionné, ce qui provoque le clignotement.

La réponse serait d'enregistrer chaque sélection en javascript (sur le changement dire), puis quand l'animation commence à désélectionner la valeur et puis la restaurer lorsque l'animation se fige. Cela vous donnera les mêmes performances que vous obtenez lorsque vous avez une petite valeur sélectionnée, tout en préservant la sélection de l'utilisateur.

Vous pouvez également faire en sorte que la forme ne peut être soumis alors qu'il est dans une phase de transition, sinon vous aurez de mauvaises valeurs à revenir.

Answer 3

Je pense personnellement autocomplete peut vraiment être le chemin à parcourir. Cependant, j'ai eu l'idée que cacher la longue sélection en substituant un court faux on ferait la diapositive plus lisse. Semble mieux travailler sur le seul navigateur je l'ai testé (Firefox 3.0.18). Le code pourrait probablement être nettoyé et il y a le bug qui les sélectionne ne correspond pas à la taille par défaut en raison des barres de défilement internes, mais cela ne devrait pas être trop difficile à falsifier.

$("#collapse-menu > li > a").click(function() {
    var was_expanded = $(this).hasClass('expanded');
    var uls = $(this).toggleClass("expanded").toggleClass("collapsed").find('+ ul');
    if (was_expanded) {
        $(this).parent().find('select').each(function() {
            var fake = $('<select class="fake"><option>' + $(this).val() + '</option></select>');
            $(this).parent().append(fake);
            $(this).hide();
        })
        uls.slideUp('medium', function() { });
    } else {
        $('.fake').remove();
        $('select').show();
        uls.slideDown('medium', function() { });
     }
});

Answer 4

Qu'est-ce que vous pouvez faire est de désactiver les listes de sélection avant d'animer ul.

        $("#collapse-menu > li > a").click(function() {
            $(this)
                .toggleClass("expanded").toggleClass("collapsed")
                .find("+ ul").find("select").attr("disabled","disabled").end()
                .slideToggle("medium",function(){
                    $(this).find("select").each(function(){this.disabled=false;});
                });
        });

donner qu'un essai et de faire rapport.

Vous voudrez probablement le style (CSS) les listes de sélection pour handicapés semblent identiques à celles non handicapées.

---

NOTES

ci-dessus a un effet secondaire de ne pas soumettre les valeurs sélectionnées lorsqu'un formulaire est soumis. Si cela est un problème pour vous, alors je vous suggère soit de supprimer toutes les options de la liste de sélection, sauf pour l'option sélectionnée avant d'animer, puis les ajouter tous de retour à l'animation une fois terminée. Et si cela ne fonctionne pas pour vous de la suggestion naugtur d'utiliser des listes de sélection de style HTML est probablement la meilleure option.

p.s. ne prend pas la peine d'essayer d'utiliser l'attribut lecture seule sur la liste de sélection ... il n'existe pas.