Chrome中的jQuery Dropkick：下拉菜单不会自动关闭答案

【问题标题】：jQuery Dropkick in Chrome: Dropdowns not auto-closingChrome中的jQuery Dropkick：下拉菜单不会自动关闭
【发布时间】：2012-03-29 08:44:55
【问题描述】：

图片说1000字：http://d.pr/ZeBI

基本上在大多数其他浏览器中，当 dropkick 菜单失去焦点时，它会关闭。或者在选择另一个Dropkick菜单时，以前/其他打开菜单的自动关闭。

然而，在 Chrome 中，这不会发生。您可以将它们全部打开并关闭它们，您必须选择某些内容或再次单击它。

有什么想法吗？

谢谢！

【问题讨论】：

有人知道如何解决多宽度问题吗？ stackoverflow.com/questions/11769888/…

标签： jquery forms select

【解决方案1】：

我，改一下代码：

  // 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');
      });
  }

它会正常工作的。

【讨论】：

我选择了on 方法而不是live。还在第 3 行使用了不同的选择器 - 在我的情况下，$('html, body') 有效，而 $('html') 没有。

【解决方案2】：

我遇到了同样的问题，我的一个朋友发现如果你在“select”标签中添加“tabindex”属性，dropkick 会正常运行。

这行不通：

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

这将起作用：

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

【讨论】：

这对我也有用，比修改插件更可取 - 谢谢！
+1。在这里也工作得很好。再说一次，这是一种修复它而不是修改插件的更好方法。干杯！

【解决方案3】：

在 web 和移动设备的 webkit 浏览器中引发了很多与 Dropkick 相关的问题。

这里是完整的代码，在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');
              });
          }

编码愉快！！

【讨论】：

【解决方案4】：

这是我发现的一个更简单的修复方法，感谢 https://github.com/JamieLottering/DropKick/issues/45

您只需在 .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;
});

【讨论】：