我遇到了与jquery-ui自动完成和滑块相关的相同形式(z-index)的问题

Question

我正在尝试使用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自动生成的元素来构建它的控件.

Answer 1

使用open和close事件修改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); }
});

在这里看一个演示.