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 demo

$("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();
}

要知道鼠标是否仍悬停菜单

1 个答案: