菜單不是在Firefox

工作非常好，我有這樣的HTML代碼：菜單不是在Firefox

<ul class="navigation-links"> 
    <li class="link-item"> 
     <img src="images/new-menu/menu-item_04.png" width="150" height="41" alt="" /> 
     <div style="display: none" class="sub-menu"> 
      <div class="sub-col"> 
       <img src="images/new-menu/home.png" width="46" height="14" alt="" /> 
       <ul> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
       </ul> 
      </div> 
      <div class="sub-col"> 
       <img src="images/new-menu/home.png" width="46" height="14" alt="" /> 
       <ul> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
       </ul> 
      </div> 
      <div class="sub-col"> 
       <img src="images/new-menu/sataer.png" width="124" height="17" alt="" /> 
       <ul> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
       </ul> 
      </div> 
      <div class="clear"></div> 
     </div> 
    </li> 
    <li class="link-item"> 
     <img src="images/new-menu/menu-item_03.png" width="154" height="41" alt="" /> 
     <div style="display:none" class="sub-menu index-menu-col2"> 
      <div class="sub-col"> 
       <img src="images/new-menu/decor.png" width="53" height="15" alt="" /> 
       <ul> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
       </ul> 
      </div> 
      <div class="sub-col"> 
       <img src="images/new-menu/acc.png" width="94" height="15" alt="" /> 
       <ul> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
       </ul> 
      </div> 
      <div class="sub-col"> 
       <img src="images/new-menu/out-decor.png" width="120" height="17" alt="" /> 
       <ul> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
       </ul> 
      </div> 
      <div class="clear"></div> 
     </div> 
    </li> 
    <li class="link-item"> 
     <img src="images/new-menu/menu-item_02.png" width="152" height="41" alt="" /> 
     <div style="display: none" class="sub-menu index-menu-col3"> 
      <div class="sub-col"> 
       <img src="images/new-menu/lighting.png" width="35" height="16" alt="" /> 
       <ul> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
       </ul> 
      </div> 
      <div class="sub-col"> 
       <img src="images/new-menu/electric.png" width="106" height="19" alt="" /> 
       <ul> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
        <li>item</li> 
       </ul> 
      </div> 
      <div class="clear"></div> 
     </div> 
    </li> 
    <li class="link-item"><img src="images/new-menu/menu-item_01.png" width="151" height="41" alt="" /></li> 
</ul>

和這段JavaScript代碼：

$(document).ready(function(e) { 
$(".link-item").hover(function(e) { 
    $(this).children(".sub-menu").slideDown("slow"); 
}); 
$(".link-item").mouseleave(function(e) { 
    $(this).children(".sub-menu").slideUp("fast"); 
});

當我打開Firefox的這一頁，並嘗試這些菜單之一，它會表現得很奇怪。並且指向的菜單將滑下並不斷滑動。

DEMO PAGE

來源

2012-05-24 Saleh

看起來你的鏈接下面有一些「空」區域，導致菜單上下移動。您可以嘗試向上移動菜單，以免該空白區域被遮蓋，導致「mouseleave」功能被執行。

來源

2012-05-24 21:13:52 MattK311

好，是的。懸停功能需要兩個參數，一個用於'mouse in'另一個用於'mouse out'，但是您將鼠標懸停在懸停之外。試試吧更多像這樣...

$(document).ready(function(e) { 
    $(".link-item").hover(function(e) { 
    $(this).children(".sub-menu").slideDown("slow"); 
    }, 
    function(e) { 
    $(this).children(".sub-menu").slideUp("fast"); 
    }) 
});

來源

2012-05-24 21:11:49 Rodolfo

嘗試：

$(document).ready(function(e) { 
    $(".link-item").mouseover(function(e) { 
     $(this).children(".sub-menu").stop().slideDown("slow"); 
    }).mouseleave(function(e) { 
     $(this).children(".sub-menu").stop().slideUp("fast"); 
    }); 
});

來源

2012-05-24 21:13:29 Blazemonger

的問題是因爲你只提供一個功能hover()這將被兩個mouseenter和mouseleave執行。你應該給它兩個功能，每個事件一個。試試這個：

$(document).ready(function(e) { 
    $(".link-item").hover(
     function(e) { $(this).children(".sub-menu").slideDown("slow"); }, 
     function(e) { $(this).children(".sub-menu").slideUp("fast"); } 
    ); 
});

來源

2012-05-24 21:13:42

您需要防止動畫隊列中逐漸累積，嘗試這樣的事情：

$(document).ready(function(e) { 
$(".link-item").hover(function(e) { 
    $(this).children(".sub-menu").stop().slideDown("slow"); 
}); 
$(".link-item").mouseleave(function(e) { 
    $(this).children(".sub-menu").stop().slideUp("fast"); 
});

來源

2012-05-24 21:14:02

菜單不是在Firefox

回答

相關問題