Indesiderato “lampeggiante” nel menu a discesa Jquery?

Question

Ho il seguente pezzo di Jquery:

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

Ciò che fondamentalmente è espandere o comprimere un menu di nidificati "liste" che contengono menù a discesa (esempio semplificato):

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

Il codice funziona assolutamente bene, tranne quando un valore elevato viene selezionato in uno dei menù a discesa. A quel punto, se cliccato, il menu sarà ancora espandere / chiudere correttamente, ma "flash" in fretta mentre si fa così, come se l'intero elemento è stato in corso il ripristino in qualche modo. Il dato di per sé soddisfacente, ma è il lampeggio che è indesiderato.

La cosa strana è che se un valore piccolo viene selezionata in un menu a discesa, non c'è lampeggiante. Quando si seleziona un valore elevato (ad esempio, superiore a 30 in una discesa età di 18-99), il lampeggio inizia accadendo.

Qualcuno può dirmi perché questo sta accadendo? O se c'è qualcosa che non va per il Jquery che sta causando questo.

Grazie.

UPDATE:

L'aggiunta di una taglia per questo. Hanno provato alcuni plugin simili / soluzioni là fuori in rete, ma tutti sembrano soffrire di questo problema "lampeggiante" quando i valori discesa di grandi dimensioni sono selezionate per impostazione predefinita.

Se aiuta, ecco una tipica soluzione simile: http://www.i-marco.nl/weblog/jquery-accordion-menu/index_collapsed.html# ... ma soffre lo stesso problema quando dropdowns vengono aggiunti all'interno della fisarmonica.

Spero che qualcuno ha una soluzione pulita, invece di aver bisogno di incidere questo in qualche modo.

Answer 1

Dalla mia osservazione: il problema sembra dipendente del sistema operativo. I seleziona sono dipinte dal sistema, come sono i controlli del sistema. Sulla mia macchina Linux provo nessun problema con lampeggiante animazione nel http://jsbin.com/ixake esempio. Mi aspetto l'avete provato su Windows (R)

Sembra che il Select è "scorrere" per il corretto ogni valore è ridipinto. E questo succede molto durante l'animazione.

La soluzione più semplice sarebbe quella di sostituire con sistema seleziona seleziona html-based per rimuovere la dipendenza del sistema. Ci sono plugin jQuery discreto che lo farà per voi.

Prova questo o scegliere qualsiasi da qui se che prima non era troppo buono.

Dopo che l'animazione dovrebbe dipendere solo JS e stile.

Answer 2

Credo che il problema è che ogni volta che l'elemento viene ridimensionato i rotoli a discesa per l'elemento selezionato, che provoca il lampeggio.

La risposta potrebbe essere quella di salvare ogni selezione in javascript (sul cambiamento dire), poi quando l'animazione inizia a deselezionare il valore e quindi ripristinarlo quando l'animazione si ferma. Questo vi darà le stesse prestazioni si ottiene quando si dispone di un piccolo valore selezionato, preservando la selezione dell'utente.

Si potrebbe anche voler far sì che il modulo non può essere presentato mentre è in una fase di transizione, altrimenti otterrete valori cattivi tornare.

Answer 3

Io personalmente penso di completamento automatico potrebbe davvero essere la strada da percorrere. Tuttavia, ho avuto l'idea che si nasconde la lunga selezionare sostituendo un falso corta renderebbe la diapositiva più agevole. Sembra funzionare meglio, da un navigatore che ho provato (Firefox 3.0.18). Il codice potrebbe probabilmente essere ripulito e non v'è il bug che a volte le seleziona non corrisponderanno i formati di default a causa delle barre di scorrimento interne, ma che non dovrebbe essere troppo difficile da falsificare.

$("#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

Che cosa si può fare è disabilitare gli elenchi di selezione prima di animare l'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;});
                });
        });

dare che una prova e riferire.

Probabilmente si vuole stile (CSS) disabili elenchi di selezione a guardare identici a quelli non disabili.

---

NOTE

Quanto sopra ha un effetto collaterale di non trasmettere i valori selezionati quando viene inviato un modulo. Se questo è un problema per voi, allora vi consiglio di uno di rimuovere tutte le opzioni dalla lista di selezione tranne che per l'opzione selezionata prima di animare e quindi aggiungere tutti indietro nel tempo l'animazione è stata completata. E se questo non funziona per voi suggerimento di naugtur di utilizzare elenchi di selezione HTML in stile è probabilmente l'opzione migliore.

P.S. non perdete tempo cercando di utilizzare l'attributo di sola lettura della lista di selezione ... non esiste.