要知道鼠標是否仍懸停菜單

Question

我有以下菜單構造非常恢復（不能更改HTML代碼到期是不可能的，只有CSS和JS！）：

 $('span').on("hover", handleHover('span')); function handleHover(e) { $(e).on({ mouseenter: function() { $(this).addClass('selecc'); $(this).next("ul").show(); }, mouseleave: function() { $(this).removeClass('selecc'); $(this).next("ul").hide(); } }); } 

 span { display:block; } ul { background-color:#CCC; color:#000; display:none; margin:0; } .selecc { background-color:Red; color:#FFF } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <span>Option 1</span> <ul> <li>suboption 1-1</li> <li>suboption 1-2</li> <li>suboption 1-3</li> </ul> <span>Option 2</span> <ul> <li>suboption 2-1</li> <li>suboption 2-2</li> <li>suboption 2-3</li> </ul> 

我需要將鼠標移到子選項上，但菜單關閉，我不知道如何告訴jquery UL是菜單組的一部分。 有點想法嗎？

Answer 1

沒有人說你不能使用jQuery動態改變HTML :)
所以，是的，將您的SPAN + UL分組，並將懸停功能附加到您的.group包裝器：

jsBin演示

$("span").each(function(){
  var ul = $(this).next("ul");
  $(this).add(ul).wrapAll("<div class='group'/>");
});

$(".group").hover(handleHover);

function handleHover() {
  $("span",this).toggleClass('selecc');
  $("ul",this).stop().slideToggle();
}