jquery懸停+位置絕對=在IE中的問題

Question

我做了一個下拉菜單，它在所有現代瀏覽器中都很棒，但我不確定，它在IE中失敗，當我嘗試選擇子菜單的子元素時，它消失了。

這是網頁：http://XXX/

，這是JS代碼

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

編輯：顯然，這是這似乎激活IE中的「鼠標移開」的下拉頂部的空間！奇怪的是，jQuery嚴格檢測絕對位置的項目區域！ :(

Answer 1

這都是因爲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 2

你有什麼使用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 3

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

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