Нежелательное «мигание» в выпадающем меню Jquery? - PullRequest
Новая
       36

Нежелательное «мигание» в выпадающем меню Jquery?

4 голосов
/ 27 марта 2010

У меня есть следующий кусок Jquery: 

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

Что он в основном делает, так это разворачивает или сворачивает меню вложенных «списков», которые содержат выпадающие списки (упрощенный пример): 

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

Код работает абсолютно нормально, КРОМЕ, когда в любом из выпадающих списков выбрано большое значение. В этот момент при нажатии меню все равно будет правильно расширяться / сворачиваться, но при этом быстро «мигать», как будто весь элемент каким-то образом сбрасывается. С самими данными все в порядке, но перепрошивка нежелательна.

Странно то, что если в раскрывающемся списке выбрано небольшое значение, мигание не происходит. Когда выбрано большое значение (скажем, больше 30 в раскрывающемся списке 18–99 лет), начинается мигание.

Может кто-нибудь сказать мне, почему это происходит? Или что-то не так в Jquery, которое является причиной этого.

Спасибо.

UPDATE:

Добавление щедрости к этому. Попробовал несколько подобных плагинов / решений в сети, но все они, похоже, страдают от этой "мигающей" проблемы, когда по умолчанию выбраны большие выпадающие значения.

Если это поможет, вот типичное аналогичное решение: http://www.i -marco.nl / weblog / jquery-accordion-menu / index_collapsed.html # ... но оно страдает от той же проблемы, когда Раскрытия добавляются в аккордеоне.

Надеюсь, у кого-то есть чистое решение, вместо того, чтобы как-то его взломать.

Ответы [ 4 ]

3 голосов
/ 14 апреля 2010

По моим наблюдениям, проблема, похоже, зависит от операционной системы. Селекты окрашиваются системой, так как они являются системными элементами управления. На моем Linux-компьютере у меня нет проблем с мигающей анимацией в примере http://jsbin.com/ixake. Я полагаю, вы проверили это на Windows (r)

Похоже, что выборка "прокручивается" до нужного значения каждый раз, когда она перерисовывается. И это часто происходит во время анимации.

Самым простым решением было бы заменить выбор системы на выборки на основе html, чтобы удалить системную зависимость. Есть ненавязчивые плагины jquery, которые сделают это за Вас.

Попробуйте это или выберите любой из здесь , если первый не был слишком хорош.

После этого ваша анимация должна зависеть только от JS и стиля.

2 голосов
/ 13 апреля 2010

Мне кажется, проблема в том, что при каждом изменении размера элемента выпадающий список прокручивается до выбранного элемента, что вызывает мигание.

Ответ будет заключаться в том, чтобы сохранить каждое выделение в javascript (например, при изменении), а затем, когда анимация начнет отменять выбор значения, и затем восстановить его, когда анимация остановится. Это даст вам ту же производительность, что и вы, когда выбрано небольшое значение, при сохранении выбора пользователя.

Вы также можете убедиться, что форма не может быть отправлена, пока она находится на переходном этапе, в противном случае вы получите неверные значения.

1 голос
/ 14 апреля 2010

Что вы можете сделать, это отключить списки выбора перед анимацией 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;});
                });
        });

попробуй и доложи.

Возможно, вы захотите стилизовать (CSS) отключенные списки выбора, чтобы они выглядели идентично не отключенным.

ПРИМЕЧАНИЯ

Вышеуказанный побочный эффект заключается в том, что вы не отправляете выбранные значения при отправке формы. Если это проблема для вас, я предлагаю вам удалить все опции из списка выбора, кроме выбранной опции перед анимацией, а затем добавить их обратно сразу после завершения анимации. И если это не сработает, то предложение naugtur использовать списки выбора в стиле HTML, вероятно, лучший вариант.

p.s. не пытайтесь использовать атрибут readonly в списке выбора ... он не существует.

1 голос
/ 13 апреля 2010

Я лично думаю, что автозаполнение действительно может быть подходящим способом. Однако у меня была идея, что сокрытие длинного выбора путем замены поддельного короткого сделает слайд более плавным. Кажется, работает лучше на одном браузере, который я тестировал (Firefox 3.0.18). Код, вероятно, может быть очищен, и есть ошибка, из-за которой иногда селекторы не будут соответствовать размерам по умолчанию из-за внутренних полос прокрутки, но это не должно быть слишком сложным для подделки. 

$("#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() { });
     }
});
...