我在同一表单（z-index）相关的 jquery-ui 自动完成和滑块方面遇到问题

Question

我正在尝试使用 jQuery ui 库创建一个网页。我的设计在表单顶部的输入字段上使用 jQuery ui 自动完成功能。紧邻此自动完成输入表单的下方是一些 jQuery 滑块。问题是，当填充自动完成框时，结果显示在滑块控件的手柄后面。这来自 jQuery 构建滑块的方式，该滑块的 z 索引为 3。jquery 自动完成控件的下拉部分的 z 索引似乎始终设置为 1。我尝试增加 z - 自动完成的输入元素的索引，但这似乎不会影响 jquery 为自动完成下拉列表创建的元素的 z 索引。我还尝试编写自己的 javascript 来按类（它是 ul）获取下拉菜单元素并手动设置它的 z-index。这似乎也不起作用。我假设这意味着，jQuery 代码以某种方式覆盖了我所做的 z-index 更改。这不是浏览器错误，而是 Firefox、Chrome、Safari 和 IE 上的问题。这是 jQuery 给出的下拉框（UL 元素）实际 z-index 的问题。

有人有解决这个问题的办法吗？人们通常如何摆弄 jQuery 自动生成的元素来构建其控件。

Answer 1

使用打开和关闭事件修改 z-index 对我有用：

$( "#tags" ).autocomplete({
  source: availableTags,      
  open: function(event, ui) { $(".ui-slider-handle").css("z-index", -1); },
  close: function(event, ui) { $(".ui-slider-handle").css("z-index", 2); }
});

请参阅此处的演示。

Answer 2

根据http://bugs.jqueryui.com/ticket/5238，似乎有2对此的解决方案。

“将 z-index 更改为 3 似乎可以完全解决这个问题。”

您可以在 css 上执行此操作，只需添加“!important”来覆盖库设置的值：

ul.ui-autocomplete {
    z-index: 3 !important;
}

或者“在自动完成输入上设置位置：相对”，以便 .zIndex() 实际上可以计算 z-index。 ”

Answer 3

这就是我为自动完成设置 z-index 所做的事情：

$("#myInputId").autocomplete({
    open: function () { $('.ui-autocomplete').css('z-index', 50); },
    source: function (request, response) {
        $.ajax({
            url: "some url",
            type: "POST",
            dataType: "json",
            data: { /* some code... */ },
            success: function (data) { /* some code... */ }
        })
    }
});