jQuery Dropkick в Chrome: выпадающие списки не закрываются автоматически

Question

Изображение говорит 1000 слов: http://d.pr/ZeBI

В большинстве других браузеров, когда фокус на выпадающем меню теряется, он закрывается. Или при выборе другого выпадающего меню автоматическое закрытие предыдущего / другого открытого меню.

Однако в Chrome этого не происходит. Вы можете открыть их все, и чтобы закрыть их, вы должны либо выбрать что-то, либо щелкнуть по нему еще раз.

Есть идеи?

Спасибо!

Answer 1

I, измените код, где он:

  // Focus events
      $dk.bind('focus.dropkick', function (e) {
        $dk.addClass('dk_focus');
      }).bind('blur.dropkick', function (e) {
        $dk.removeClass('dk_open dk_focus');
      });

Поставьте:

if($.browser.webkit) {

      $('html').click(function() {
          $dk.removeClass('dk_open dk_focus');

    });
      $dk.click(function(event){
          $dk.addClass('dk_focus');

      });


  }else{

      // Focus events
      $dk.live('focus', function() {
          $dk.addClass('dk_focus');
      }).live('blur', function() {
           $dk.removeClass('dk_open dk_focus');
      });
  }

и все будет работать нормально.

Answer 2

У меня была такая же проблема, и мой друг обнаружил, что если вы добавите атрибут "tabindex" к тегу "select", dropkick будет работать правильно.

Это не сработает:

<select name="test">
<option val="1">a</option>
</select>

Это будет работать:

<select name="test" tabindex="1">
<option val="1">a</option>
</select>

Answer 3

Вот еще более простое исправление, которое я нашел, любезно предоставлено https://github.com/JamieLottering/DropKick/issues/45

Вам просто нужно добавить одну строку кода в событие "live" "click" .dk_toggle (которое начинается в строке 363 в большинстве версий):

$('.dk_open').removeClass('dk_open');

Последний метод:

// Handle click events on the dropdown toggler
$('.dk_toggle').live('click', function (e) {
    $('.dk_open').removeClass('dk_open');
    var $dk  = $(this).parents('.dk_container').first();
    _openDropdown($dk);
    if ("ontouchstart" in window) {
    $dk.addClass('dk_touch');
    $dk.find('.dk_options_inner').addClass('scrollable vertical');
    }
  e.preventDefault();
  return false;
});

Answer 4

Было много проблем, связанных с Dropkick в браузерах webkit для веб, а также для мобильных устройств.

Вот полный код, найдите следующий код в dropkick

// Focus events $dk.bind('focus.dropkick', function (e) { $dk.addClass('dk_focus'); }).bind('blur.dropkick', function (e) { $dk.removeClass('dk_open dk_focus'); });

и замените его следующим

// Focus events
        if($.browser.webkit) {

              $('html').click(function() {
                  $dk.removeClass('dk_open dk_focus');

            });

          $dk.click(function(event){
                  $dk.addClass('dk_focus');

              });
              $('.dk_toggle').click(function(){
                var elements__ = $(this).parent('div');
                    if(elements__.hasClass('dk_open')){
                        _closeDropdown($dk); 
                        return false;
                    }
            });



          }
          else{

              // Focus events
              $dk.live('focus', function() {
                  $dk.addClass('dk_focus');
              }).live('blur', function() {
                   $dk.removeClass('dk_open dk_focus');
              });
          }

Счастливое кодирование !!