1

这就是问题所在。我使用 superfish CSS 方法创建了一个带有下拉菜单的菜单。主菜单是一个无序列表，每个都<li>包含一个 child<a>和 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>

顶层的 CSS<li>是<a>：

.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>鼠标悬停在下拉菜单上时会再次下降。我有一些 jquery 代码可以向下滑动有效的子菜单，但我仍然会在悬停时获得双下拉菜单。我的jQuery代码是：<li><a>

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

无论如何要从<a>标签中删除悬停事件？

任何想法将不胜感激。

4

1 回答 1

0

这是一个测试用例：

<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();
});
于 2012-05-17T00:20:25.123 回答