Question

有一个预测搜索，可以创建用户可以选择的项目的下拉菜单。在下拉列表后面有一个菜单按钮，其中包含一个9999的z-index。因此，菜单按钮出现在下拉菜单的前面。解决这个问题的方法是我的解决方案：

使用jQuery监听器：用户点击搜索框后，更新按钮的z-index：

$( ".myIcon").css("z-index" , 1);

一旦用户点击搜索框，使用'blur'监听器重新更新z-index：

$( ".myIcon").css("z-index" , 9999);

这样可行，但看起来不太干净。我无法访问用于生成下拉菜单的代码，因此无法更新此项目的z-index。

还有其他我不知道的解决方案吗？

Answer 1

您是否可以请求将菜单图标更改为更合理的内容？

没有必要让它高，只是在下一个元素之上的1个值就足够了。

对不起，我找不到任何其他解决方法的方法，而不是你建议的方法。

Answer 2

您可以使用：

$( ".myIcon").css("visibility" , "hidden");

$( ".myIcon").css("visibility" , "visible");

Answer 3

为搜索的父级提供相同的z-index

虽然很难知道html是什么样的，因为你没有包含一个例子。如果您希望它出现在同一级别，那么您可以从门给它相同的z-index。如果搜索部分所在的块位于导航之后，那么它们自然会在相同的z-index上彼此重叠。

#nav,#search{position:absolute;z-index:9999}

例如，如果#search位于html之后的#nav，则会#search置于#nav之上;像：

<parent><nav/><search/></parent>

如果它位于它之前，并且可能位于不同的父级，那么您可以使用以下内容：

#nav{z-index:9998} #search{z-index:9999}

如果html更像是：

<search/><parent><nav/></parent>

但是，如果您需要打开/关闭z-index，而且#search上根本无法修复它，那么您已经朝着正确的方向前进了。

这样的事情会相当容易：

$('#search input').on('focusin', function(){//on focus
    $(this).siblings('.myIcon').css({zIndex: '9999'});
}).on('focusout', function(){//on un-focus
    $(this).siblings('.myIcon').css({zIndex: '1'});
});

虽然如果您能够控制css，那么您可以使用.myIcon为z-index:9999创建课程，而是使用以下内容：

.on{z-index:9999}/*added css*/

$('#search input').on('focusin focusout', function(){//on focus change
    $(this).siblings('.myIcon').toggleClass('on');
});

做了一个小提琴：http://jsfiddle.net/filever10/pxdz5/

多次更新z-index以使菜单项正确显示

3 个答案: