0

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

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

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

并且一旦用户使用“模糊”侦听器单击搜索框，重新更新 z-index ：

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

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

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

4

3 回答 3

0

您可以要求将菜单图标更改为更合理的东西吗？

没有必要让它那么高，只需比下一个元素高 1 个值就足够了。

很抱歉，除了您建议的方法之外，我看不到任何其他解决此问题的方法。

于 2013-11-13T12:49:14.810 回答
0

你可以使用这个：

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

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

于 2013-11-13T12:53:37.487 回答
0

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

尽管由于您没有包含示例，因此很难知道 html 的外观。如果您希望它出现在同一级别，那么您可以从门给它相同的 z-index。如果搜索部分所在的块在导航之后，那么它们自然会以相同的 z-index 在彼此之上。

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

例如，如果在 html之后，就会放在#search上面；像：#nav#search#nav

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

如果它位于它之前，并且可能与不同的父级，那么你可以使用类似的东西：

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

如果 html 更像是：

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

但是，如果您需要它来打开/关闭 z-index，并且它根本无法修复 on #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，那么您可以只为.myIconwith创建一个类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/

于 2013-11-13T13:26:40.580 回答