Question

我正在使用JQuery UI 1.12。我已经创建了自定义选择菜单（一个无序列表，模拟了SELECT输入）taht我想打开当有人点击它们，或者有人隐藏＆＃34; Tab＆＃34;将焦点移到一个键的关键。为了在获得焦点时适应开放，我有这个JS

if ( !$this.parent().hasClass('select') ) {
        var $wrapper = $("<div />", {
            'class' : "select", 
        'tabIndex' : '1' 
    }).css({
            width   : selectWidth
    }).focus(function() {
    $(this).find('.select-styled').click(); 
}).blur(function() {
    clickHandled = false;
        $(this).find(".select-options li").removeClass("selected");
    $(this).find('.select-styled').removeClass('active').next('ul.select-options').hide(); 
});
    $this.wrap( $wrapper );
}   // if

但是，如果屏幕宽度小于500像素，我希望我的自定义菜单占据整个屏幕，所以我添加了这种风格

@media only screen and (max-width:501px) {
  .active,
  .active + ul {
    width:100vw;
    height: 100vh;
    max-height: initial;
    position: fixed;
    top:0;
    left:0;
  }
}

问题是，现在只在谷歌浏览器上，当我将屏幕压缩到小于500像素，然后点击我的自定义菜单时，它会立即关闭。这Fiddle说明了这种现象。这在Firefox上并不会发生。点击它后如何在Google Chrome上打开我的菜单？

Answer 1

问题在于这种约束力;

$(document).click(function(event) {
    $styledSelect.removeClass('active');
    $list.hide();
});

如果删除代码的这一部分，它将按您的意愿工作。焦点打开菜单，点击打开菜单，单击其他位置时关闭菜单。看到我的叉子; http://jsfiddle.net/aarmu2mf/

出于某种原因，我没有时间进行更深入的调查，当您点击较小的屏幕时，它会在您第一次单击该元素时触发此功能。我的猜测是，当你点击它时，它会获得焦点，然后焦点状态会触发点击。意味着流程是顺便说一句：点击 - ＆gt;功能打开菜单 - ＆gt;浏览器关注点击的元素 - ＆gt;绑定到焦点事件的功能触发单击元素 - 功能关闭菜单。

另请注意，在焦点上打开菜单并不是一个好的行为，大多数用户习惯在他们专注于元素时用空格键打开下拉列表。

Answer 2

从评论转到答案，以便更好地澄清。

在你小提琴的第52行，我看到了：

var $list = $('<ul />', {
  'class': 'select-options'
}).insertAfter($styledSelect);

在第95行，我看到了：

$(document).click(function(event) {
  $styledSelect.removeClass('active');
  $list.hide();
});

这会在点击$list时隐藏document。清除或隐藏菜单是有意义的。我认为你应该这样做有条件，以帮助确保与其他点击事件没有冲突。

第66行：

$styledSelect.unbind('click');

这应取消绑定click事件，但由于它仅针对一个特定元素，并且可能不会影响绑定到document的click事件。还在调查。我会继续更新。

在Google Chrome上，当有人点击它时，如何保持自定义SELECT菜单处于打开状态？

2 个答案: