jquery ui选择菜单滚动条不工作

jquery ui selectmenu scrollbar not working

本文关键字：工作 滚动条 菜单 ui 选择 jquery      更新时间：2023-10-28

我使用jquery selectmenu插件。我已经用初始化了选择

$('select').selectmenu({width:100, maxHeight:300, style: 'dropdown'});

我有很多选项，这会导致出现默认的浏览器滚动条，但我不能使用它。如果我单击并尝试拖动这个滚动条，选择菜单关闭。我可以用鼠标滚轮滚动。css和各种插件可能存在一些冲突。但我不确定从哪里开始寻找。

有什么想法吗，是什么导致了这个问题？

当select菜单在CSS中打开时，您可以设置其内容的最大高度，然后它将在可使用的项目列表中显示滚动条。

ul.ui-menu { max-height: 420px !important; }

如果您正在使用包含<ul>指定了类"ui menu"的元素。

JQueryUI演示页面的示例"选择一个数字"给出了一个解决方案：

$('select').selectmenu().selectmenu("menuWidget").css("height","200px");

js文件的这一部分似乎有问题：

// document click closes menu
$( document ).bind( "mousedown.selectmenu-" + this.ids[ 0 ], function( event ) {
    //check if open and if the clicket targes parent is the same
    if ( self.isOpen && !$( event.target ).closest( "#" + self.ids[ 1 ] ).length ) {
        self.close( event );
    }
});

滚动条同意"if"子句中的条件，因此selectmenu被关闭。。。

您可以对"if"子句中的行进行注释，直到有人给出此错误的解决方案为止。这样，当你点击退出选择菜单时，它不会关闭，但当你选择任何选项时，它会关闭。。。

编辑：

好的，现在可以用了。将前面显示的部分更改为：

$( document ).bind( "mousedown.selectmenu-" + this.ids[ 0 ], function( event ) {
    //check if open and if the clicket targes parent is the same
    if ( self.isOpen && !$( event.target ).closest( "#" + self.ids[ 1 ] ).length && !$(event.target).hasClass('ui-selectmenu-menu-dropdown')) {
        self.close( event );
    }
});

这样，由于滚动条是div的一部分，类为"uiselectmenumenu下拉菜单"。。。移动滚动条时，selectmenu不会关闭。

如果您想按ID设置每个项目的最大高度，请使用：

#select1-menu { max-height: 150px !important; }
#select2-menu { max-height: 200px !important; }

例如，您的selectmenu的id是"select"use：

#select-menu { max-height: 150px !important; }

<!--JQUERY-->
$('.custom-combobox-toggle').on('click',function (e) {
      e.preventDefault();
      $('.ui-menu').addClass('custom-scroll');
});
<!--CSS-->
.ui-widget.ui-widget-content.custom-scroll {
    max-height: 300px;
    overflow: auto;
    display: block;
}
相关文章：