如何解决jQuery悬停+绝对位置= IE中的问题
| 我正在制作一个下拉菜单,它在所有现代浏览器中都很好用,但是我不确定,它在IE中失败,当我尝试选择子菜单的子元素时,它消失了。 这是页面:http:// XXX / 这是JS代码$(\"nav li\").hover(function(){
$(\".subnavi-wrapper\",$(this)).show();
},function(){
$(\".subnavi-wrapper\",$(this)).hide();
});
编辑:显然,这是下拉菜单顶部的页边距,似乎在IE中激活了“ mouseout \”!显然,jQuery绝对无法检测到绝对位置的项目区域! :(解决方法
这是因为在Li元素中阻止了“ subnavi-wrapper”。您必须删除DIV并仅使用Ul元素尝试这样做。我在这里做了类似的事情:http://www.muzykakoncerty.pl
在这里,像这样:
$(\'#menu > ul > li\').each(function() {
if($(\'ul\',this).length > 0) {
$(this).hover(
function() {
$(\'ul\',this).show();
},function() {
$(\'ul\',this).hide();
}
);
}
});
我的菜单HTML代码是:
<div id=\"menu\">
<ul>
<li>
<a href=\"index.html\">wstęp</a>
</li>
<li>
<ul>
<li><a href=\"zespol-big-band.html\">Big Band</a></li>
<li><a href=\"zespol-arti-sound-concert.html\">Arti Sound Concert</a></li>
<li><a href=\"zespol-leszczynska-kapela-barokowa.html\">Leszczyńska Kapela Barokowa</a></li>
</ul>
<a href=\"#\">zespoły</a>
</li>
<li>
<ul>
<li><a href=\"taniec-dancing-sisters.html\">Dancing Sisters</a></li>
</ul>
<a href=\"#\">taniec</a>
</li>
<li>
<a href=\"o-mnie.html\">o mnie</a>
</li>
<li>
<a href=\"kontakt.html\">kontakt</a>
</li>
</ul>
</div>
编辑:
所以尝试一下:
$(\'nav > ul > li\').each(function() {
if($(\'ul\',this).hide();
}
);
}
});
,您使用的多重选择器选择器将同时显示/隐藏nav li
和.subnavi-wrapper
。我想您只需要拨动.subnavi-wrapper
$(\"nav li\").hover(function(){
$(\".subnavi-wrapper\").show();
},function(){
$(\".subnavi-wrapper\").hide();
});
如果您只想在当前ѭ9下显示.subnavi-wrapper
:
$(\"nav li\").hover(function(){
$(this).find(\".subnavi-wrapper\").show();
},function(){
$(this).find(\".subnavi-wrapper\").hide();
});
,// show
$(\"nav li\").live(\'mouseover\',function(){
$(\".subnavi-wrapper\").show();
});
// hide
$(\"nav li\").live(\'mouseout\',function(){
$(\".subnavi-wrapper\").hide();
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。