使用超级鱼菜单的双悬停事件

Question

这就是问题所在。我使用 superfish CSS 方法创建了一个带有下拉菜单的菜单。主菜单是一个无序列表，每个<li> 包含一个子<a> 和一个<ul>，例如

<ul class="sfmenu">
  <li>
    <a href="#">MENU 1</a>
    <ul>
      <li><a href="#"><div>Stuff here</div></a></li>
      <li><a href="#"><div>Stuff here</div></a></li>
      <li><a href="#"><div>Stuff here</div></a></li>
   </ul>
  </li>
  <li>
    <a href="#">MENU 2</a>
    <ul>
      <li><a href="#"><div>Stuff here</div></a></li>
      <li><a href="#"><div>Stuff here</div></a></li>
    </ul>
  </li>
</ul>

顶级<li> 和<a> 的CSS 是：

.sf-menu li {
  color: #f9dfa0; 
  cursor: pointer; 
  display: inline-block; 
  float: left; 
  height: 45px; 
  margin: 0
  padding: 0;
  padding: 20px 10px 0 10px;
}

.sf-menu a 
{
  font-weight: normal; 
  text-decoration: none;
  text-align: center;
  height: 45px;
  width: 100%;
}

<li> 的这种定位（填充）导致在将鼠标悬停在 <li> 上时出现双悬停效果，然后在将鼠标悬停在 <a> 上时再次下降。我有一些 jquery 代码可以向下滑动有效的子菜单，但我仍然会在悬停时获得双下拉菜单。我的jQuery代码是：

$(function() {
  $('.sf-menu li').mouseover(function(){
    $(this).children('ul').hide().slideDown('normal');
  });
});

有没有办法从<a>标签中移除悬停事件？

任何想法都将不胜感激。

Answer 1

这是一个测试用例：

<ul class="sf-menu">
<li><span>unmatched</span></li>
<li><span>unmatched</span>
            <ul>
    <li><span>unmatched</span></li>
    <li><span>unmatched</span></li>
    </ul>
</li>
<li><span>unmatched</span></li>
</ul>

<button onclick=' $(".sf-menu>li:not(li ul li)>span").text("matched");'></button>

点击按钮：

<ul class="sf-menu">
<li><span>matched</span></li>
<li><span>matched</span>
            <ul>
    <li><span>unmatched</span></li>
    <li><span>unmatched</span></li>
    </ul>
</li>
<li><span>matched</span></li>
</ul>

很难弄清楚，你的代码应该是：

$(function() {
  $('.sf-menu>li:not(li ul li)').mouseover(function(){
    $(this).children('ul').hide().slideDown('normal');
  });
});

更新：当您将鼠标悬停在子元素上时，这将取消事件冒泡：

$('.sf-menu>li>ul>li>a').mouseover(function(event){
   event.stopPropagation();
});