Mouseenter僅在第一次嘗試進入時觸發

Question

我試圖將每個ul > li向下滑動，將其懸停在其父li ，然后在mouseleave事件上將其向上滑動

該代碼在第一個mouseenter和mouseleave上效果很好。 但是，當我將鼠標懸停在已經觸發一次的panel上時， mouseenter函數不會再次觸發，我知道我已經關閉了，但是不確定我哪里出了錯

在這里撥弄： http : //jsfiddle.net/k2b5a62j/1/

我試着撥弄hover以及沒有運氣

**為了簡單起見，我對小提琴進行了一些更新

Answer 1

我非常確定您的意思是，您希望在懸停時能夠查看所有項目，而不是立即消失。 我稍微改變了您的DOM和jQuery選擇器，以實現以下目的：

 //Per comment of the original poster: $('ul li div').on("mouseenter", function(event){ $(this).find('ul').slideDown('fast', function(){ // Done. }); event.preventDefault(); }).on("mouseleave",function (event) { $(this).find('ul').slideUp('fast', function(){ // Done. }); event.preventDefault(); }); 

 ul li ul { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <ul> <li><div> <a href="#">Product1</a> <ul id="test"> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div></li> <li><div><a href="#">Product2</a> <ul> <li>Item product 2</li> <li>Item product 2</li> <li>Item product 2</li> </ul> </div></li> <li><div><a href="#">Product3</a> <ul> <li>Item product 2</li> <li>Item product 2</li> </ul> </div></li> </ul> </div> 

回復提問者的評論，以使每個li一次顯示一個：

 jQuery(document).ready(function($) { $('.inner-link').hide(); $('.link').mouseenter(function() { $(this) .find('ul') .find('li') .stop(true,true) .each(function(index) { $(this) .delay(500 * index) .slideDown(500); }); }); $('.link').mouseleave(function() { $(this) .find('ul') .find('li') .stop(true,true) .each(function(index) { $(this) .delay(500 * index) .slideUp(500); }); }); }); 

 .link { position: relative; right: 0%; width: 8%; list-style-type: none; vertical-align: middle; display: table-cell; outline: none; height: 100%; text-align: center; margin: 0px 11px; } .inner-list { position: absolute; width: 100%; margin: 0px auto; left: 0px; } .inner-link { list-style-type: none; width: 100%; margin: 0px 0px 0px -40px; border-bottom: 1px black solid; } .inner-link:first-child { padding-top: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="nav-container"> <li class="link"><a href="">Panel 1</a> <ul class="inner-list"> <li class="inner-link">Link #1</li> <li class="inner-link">Link #2</li> <li class="inner-link">Link #3</li> <li class="inner-link">Link #4</li> <li class="inner-link">Link #5</li> </ul> </li> <li class="link"><a href="">Panel 2</a> <ul class="inner-list"> <li class="inner-link">Link #1</li> <li class="inner-link">Link #2</li> <li class="inner-link">Link #3</li> <li class="inner-link">Link #4</li> <li class="inner-link">Link #5</li> </ul> </li> <li class="link"><a href="">Panel 3</a> <ul class="inner-list"> <li class="inner-link">Link #1</li> <li class="inner-link">Link #2</li> <li class="inner-link">Linnk #3</li> <li class="inner-link">Link #4</li> <li class="inner-link">Link #5</li> </ul> </li> <li class="link"><a href="">Panel 4</a> <ul class="inner-list"> <li class="inner-link">Link #1</li> <li class="inner-link">Link #2</li> <li class="inner-link">Linnk #3</li> <li class="inner-link">Link #4</li> <li class="inner-link">Link #5</li> </ul> </li> </ul>