3

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

有没有人可以解决这个问题？人们通常如何摆弄 jQuery 自动生成的元素来构建它的控件。

4

3 回答 3

8

使用打开和关闭事件来修改 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); }
});

在此处查看演示。

于 2010-12-07T07:18:41.073 回答
2

根据http://bugs.jqueryui.com/ticket/5238，似乎有两种解决方案。

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

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

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

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

于 2012-01-28T20:32:20.360 回答
0

这是我为自动完成设置 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... */ }
        })
    }
});
于 2018-10-20T22:59:16.170 回答