jQuery UI 布局的 Firefox Select 问题答案

【问题标题】：Firefox Select issue with jQuery UI LayoutjQuery UI 布局的 Firefox Select 问题
【发布时间】：2013-07-15 14:38:59
【问题描述】：

我在 jQuery UI 布局中遇到了一个奇怪而晦涩的问题。我的一个窗格中有一个下拉菜单，当您单击它时，它会打开，但您可以选择任何内容。

该问题似乎在过去发生过，如此处所述： https://groups.google.com/forum/#!topic/jquery-ui-layout/ZaJxX3NbPx4

但在那篇文章中，他们说它与 showOverflowOnHover 相关联 - 我设置为 false 的属性，默认情况下在插件中和在每个实例中都设置为 false。

这是我的初始化代码：

$('.splitter').layout({
      resizeWhileDragging: true,
      sizable: false,
      animatePaneSizing: true,
      fxSpeed: 'slow',
      east__size: '70%',
      showOverflowOnHover: false,
      enableCursorHotkey: false
   });

   $('.splitter_inside').layout({
      resizeWhileDragging: true,
      sizable: false,
      animatePaneSizing: true,
      enableCursorHotkey: false,
      showOverflowOnHover: false,
      fxSpeed: 'slow',
      south__size: "40%"
   });

'splitter_inside' 在'splitter'之内。

还有其他人遇到过这个问题，或者对如何解决它有任何想法吗？我正在制作小提琴，但遇到了一些麻烦。

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-layout

【解决方案1】：

我在 Firefox 中遇到了同样的问题，UI.Layout 窗格中的选择列表菜单在悬停时会消失。我终于将其归结为以下交互：

溢出：窗格上的自动
:before content: "" 应用于窗格的 micro clearfix 组件
evt.stopPropagation();在 UI.Layout 源码中的 addHover() 中

您可以删除这些因素中的任何一个来解决问题。然而，更大的问题似乎是 UI.Layout 源代码中的错误，因为 evt.stopPropagation();不是问题的原因，只是一个触发器。注释出来将解决问题，即使在“选择列表”错误发生时不会运行此代码。

我在这里报告了这个问题：https://groups.google.com/forum/#!topic/jquery-ui-layout/pHHxkewV9ZI

【讨论】：

【解决方案2】：

试试这个

$(function() {
    $('.ui-layout-content').click(function(e) {                                                                                             
        e.target.focus();                                                   
    });
})

【讨论】：