Question

尝试构建下拉菜单。我们的想法是在父级悬停时向父级和子级添加类，并在鼠标位于两者之外时删除添加的类。这是html

<ul>
  <li class="menuitem"></li>
  <li class="menuitem">
    <ul></ul>
  </li>
  <li class="menuitem"></li>
</ul>

这是jquery

$(".menuitem").each(function(){
  $(this).hover(function(){
    $(this).addClass("visible");
    $(this).find("ul").addClass("visible");
  });
});

$(".visible").each(function(){
  $(this).mouseout(function(){
    $(this).removeClass("visible");
  });
});

Answer 1

事件处理程序绑定到绑定时匹配的元素。稍后添加一个类不会使事件处理程序适用于该类。

您似乎在寻找的只是toggleClass

$(".menuitem").hover(function(){
    $(this).find('ul').addBack().toggleClass("visible");
});

FIDDLE

Answer 2

hover()实际上包含了2个事件...... mouseenter和mouseleave。如果只提供一个回调参数，它将用于两个事件。

如果你提供2个回调，第一个用于输入，第二个用于离开，所以你可以这样做：

function enterEl(){
  $(this).addClass('visible').find('ul').addClass('visible');
}

function leaveEl(){
  $(this).removeClass('visible').find('ul').removeClass('visible')
}

$(".menuitem").hover(enterEl, leaveEl);

这比使用切换方法更冗长，但要指出您可以在两个事件处理程序中执行不同的操作。

这与做

也是一回事

$(".menuitem") 
      .mouseenter(enterEl)
      .mouseleave(leaveEl);

从添加类的元素中删除类

2 个答案: