javascript - Jquery hover + position absolute = IE 中的问题

Question

我正在制作一个下拉菜单，它在所有现代浏览器中都运行良好，但我不确定，它在 IE 中失败，当我尝试选择子菜单的子元素时，它消失了。

这是页面:http://XXX/

这是JS代码

$("nav li").hover(function(){
    $(".subnavi-wrapper", $(this)).show();
}, function(){
    $(".subnavi-wrapper", $(this)).hide();
});

编辑:显然是下拉列表顶部的边距似乎激活了 IE 中的“mouseout”!显然 jQuery 检测到绝对位置的元素区域很糟糕! :(

Answer 1

都是因为在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).length > 0) {
        $(this).hover(
            function() {
                $('ul', this).show();
            },
            function() {
                $('ul', this).hide();
            }
        );
    }
});