有一个预测搜索，它创建了一个用户可以从中选择的项目的下拉菜单。下拉菜单后面有一个菜单按钮，其中包含 9999 的 z-index。因此，菜单按钮出现在下拉菜单的前面。解决这个问题是我的解决方案：
使用 jQuery 监听器： 一旦用户点击搜索框，更新按钮的 z-index ：
$( ".myIcon").css("z-index" , 1);
一旦用户使用“模糊”侦听器点击搜索框，重新更新 z-index：
$( ".myIcon").css("z-index" , 9999);
这可行，但看起来不是很干净。我无权访问用于生成下拉菜单的代码，因此无法更新此项的 z-index。
还有其他我不知道的解决方案吗？
【问题讨论】：
HTML 以便我们查看上下文吗？
标签： javascript jquery css z-index
为搜索的父级提供相同的 z-index
虽然由于您没有包含示例，因此很难知道 html 的外观。如果您希望它出现在同一级别，那么您可以从门给它相同的 z-index。如果搜索部分所在的块在导航之后，那么它们自然会在相同的z-index上彼此重叠。
#nav,#search{position:absolute;z-index:9999}
例如，将#search 放在#nav 之上，因为#search 在html 中位于#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，那么您可以使用 z-index:9999 为 .myIcon 创建一个类，然后使用以下内容：
.on{z-index:9999}/*added css*/
$('#search input').on('focusin focusout', function(){//on focus change
$(this).siblings('.myIcon').toggleClass('on');
});
【讨论】：
您能否要求将菜单图标更改为更合理的图标？
没有必要把它设置得那么高，只需比下一个元素高 1 个值就足够了。
很抱歉，除了您建议的方法之外，我看不到任何其他解决此问题的方法。
【讨论】：
你可以用这个：
$( ".myIcon").css("visibility" , "hidden");
$( ".myIcon").css("visibility" , "visible");
【讨论】：