jQuery ul li懸停效果

我有this code here，我試圖在ul#menu li懸停事件上顯示嵌套的.submenu列表。如果您看到ul.submenu位於li的內部，但由於某種原因，將鼠標從實際的ul#menu li a拖動到其嵌套的ul.submenu時，它會消失，就好像您正在移出它。我不明白爲什麼會發生。jQuery ul li懸停效果

我已經嘗試改變一下DOM以及使用setTimeout，但沒有運氣。

有關如何完成此任務的任何想法？更重要的是......爲什麼會出現我的問題？我的意思是，因爲ul.submenu是裏面li不應該被認爲是相同的懸停區？

來源

2013-02-25 Dimitris Damilos

[好像工作只是罰款在Chrome 25中]（http://i.imgur.com/qrCJf9E.png）。 – 2013-02-25 14:10:02

我注意到孩子和父母菜單之間存在差距。快速移動鼠標時，它不會隱藏子菜單。這告訴我，當你的鼠標碰到這個間隙時，它會運行代碼來隱藏菜單，因爲你不再徘徊在父菜單上。 – christopher 2013-02-25 14:11:10

@Chris Cooney：是的，我注意到了。任何想法如何克服這一點？ – 2013-02-25 14:12:05

常見問題。父菜單項和.submenu之間的空格是罪魁禍首。

一個簡單的解決方法是將.submenu包裝在一個div中，該寬度足以作爲菜單項和子菜單之間的橋樑。

看到這裏 -

CSS changes-

.submenu-wrapper { 
    position: absolute; 
    min-width: 160px; 
    min-height: 36px; 
    top: -4px; 
    left: 160px; 
} 
.submenu { 
    position: relative; 
    min-width: 160px; 
    min-height: 36px; 
    top: 0; 
    left: 10px; 
    background: url('../images/gradient_menuarea.png') repeat-x; 
}

JS變化 -

$(function(){ 
    $('#menu > li, .submenu > li').hover(
     function(){ 
      var submenu = $(this).find('ul.submenu'); 
      if (submenu.hasClass('submenu')){ 
       submenu.removeClass('hide'); 
      } 
     }, 
     function(){ 
      var submenu = $(this).find('ul.submenu'); 
      if (submenu.hasClass('submenu')){ 
       submenu.addClass('hide'); 
      } 
    }); 
});

就這樣子菜單UL是正確的目標。

請注意，您可以通過使用這個CSS

.submenu {display:none;} 
#menu-area ul li:hover .submenu {display:block}

消除JS你不會需要.hide類的子UL或者

http://jsfiddle.net/BuJav/16/

來源

2013-02-25 15:38:29 rzr

非常容易和很好的解決方案，也很好解釋！謝謝！ :) – 2013-02-25 18:36:47

試試這個：http://jsfiddle.net/UFevL/6/

HTML

<div id="menu"> 
    <ul> 
     <li class="active"> 
      <a href="?l=EL&amp;m=932K59EciV">Menu #1</a> 
     </li> 
     <li> 
      <a href="?l=EL&amp;m=M-z-3crmAP">Menu #2</a> 
     </li> 
     <li> 
      <a href="?l=EL&amp;m=jpHiTwH1bT">Menu #3</a> 
     </li> 
     <li> 
      <a href="?l=EL&amp;m=Jwr0SIWoWX">Menu #4</a> 
     </li> 
     <li> 
      <a href="?l=EL&amp;m=QY8SgMl5JH">Menu #4</a> 
     </li> 
     <li> 
      <a href="?l=EL&amp;m=8GaCmPByu3">Menu #5</a> 
     </li> 
     <li> 
      <ul> 
       <li> 
        <a href="?l=EL&amp;m=ueHp2vYKUa">Submenu #1</a> 
       </li> 
       <li> 
        <a href="?l=EL&amp;m=HQvyKxum8q">Submenu #2</a> 
       </li> 
       <li> 
        <a href="?l=EL&amp;m=81cDaTOCsL">Submenu #3</a> 
       </li> 
      </ul> 
      <a href="?l=EL&amp;m=BQMppfQ0Dl">Menu #6</a> 
     </li> 
     <li> 
      <a href="?l=EL&amp;m=D3wTd4F5Mn">Menu #7</a> 
     </li> 
    </ul> 
</div>

CSS

#menu ul { 
    width: 160px; 
    padding: 4px; 
    margin: 0; 
    border: 2px solid #94AA13; 
    background-color: #fff; 
    border-radius: 4px; 
} 

#menu li { 
    position: relative; 
    padding: 0; 
    margin: 0; 
} 

#menu li + li { 
    margin-top: 4px; 
} 

#menu a { 
    display: block; 
    padding: 0 20px; 
    font-size: 14px; 
    line-height: 36px; 
    color: #f2f2f2; 
    background-color: #283720; 
    border-radius: 4px; 
} 

#menu li > ul { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 100%; 
    margin: -4px 0 0 10px; 
} 

#menu li:hover > ul { 
    display: block; 
} 

#menu li:hover > ul:before { 
    display: block; 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: -10px; 
    width: 10px; 
    height: 100%; 
}

JS ...無！

的訣竅是在：元素之前：http://caniuse.com/#search=before

如果你不能使用它，嘗試添加一個虛擬股利。

來源

2013-02-25 14:36:26 coma

我不知道，如果它被認爲是在當前項目中可以接受的，但你可以做一個快速修復：

menu-area ul li a{ 
    width: 100%; 
    color: #F2F2F2; 
    display: block; 
    padding-right:10%; 
}

您可以將該值更改爲你想要的任何％能解決您的需求。只要做到這一點就足以確保符合子菜單區域。我沒有檢查確切的價值。讓我知道它是否有效！

來源

2013-02-25 14:55:40 James

jQuery ul li懸停效果

回答

相關問題