Question

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

这是JS代码

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

编辑：显然它是下拉列表中的边距，似乎激活了IE中的“mouseout”！很明显，jQuery检测到绝对位置的项目区域！：（

Answer 1

您使用的multiple selector selector将显示/隐藏nav li 和 .subnavi-wrapper。我认为您只需要切换.subnavi-wrapper

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

如果您只想在当前.subnavi-wrapper下显示li：

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

Answer 2

这都是因为Li元素中的块“subnavi-wrapper”。您必须删除DIV并尝试仅使用UI元素。我在这里做了类似的事情：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();
            }
        );
    }
});

Answer 3

// show
$("nav li").live('mouseover',function(){
    $(".subnavi-wrapper").show();
});

// hide
$("nav li").live('mouseout',function(){
    $(".subnavi-wrapper").hide();
});

Jquery悬停+位置绝对= IE中的问题

3 个答案: