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

使用superfish菜单的双悬停事件

1 个答案: