Question

我正在浏览此页面上的以下菜单：http://cssmenumaker.com/menu/slabbed-accordion-menu

我想扩展悬停，以便我可以在顶级菜单项以及展开的项目上添加链接。

我的脚本中有以下代码，可以在悬停时使用，也可以在移动设备上使用。

( function( $ ) {
$( document ).ready(function() {
$('#cssmenu li.has-sub > a ').on('mouseover', function(){
    $(this).removeAttr('');
    var element = $(this).parent('li');
    if (element.hasClass('open')) {
        element.removeClass('open');
        element.find('li').removeClass('open');
        element.find('ul').slideUp();
    }
    else {
        element.addClass('open');
        element.children('ul').slideDown();
        element.siblings('li').children('ul').slideUp();
        element.siblings('li').removeClass('open');
        element.siblings('li').find('li').removeClass('open');
        element.siblings('li').find('ul').slideUp();
    }
});

我遇到的问题是，当鼠标指针悬停在＆＃39; li.has-sub a＆＃39;它扩展得很好，但它也会在＆＃39; li.has-sub a span＆＃39;徘徊。如何防止链接内部也触发事件？

这是html：

<ul>
 <li><a href='#'><span>Home</span></a></li>
  <li class='active has-sub'><a href='index.html'><span>Serviced Apartments</span></a>
  <ul>
  <li><a href='#'><span>Submenu 1</span></a></li>
  <li><a href='#'><span>Submenu 2</span></a></li>
  </ul>
 </li>
 <li><a href='#'><span>Find/Contact Us</span></a></li>
</ul>

非常感谢任何帮助。

Answer 1

我认为问题在于你如何定义var元素，因为

var element = $(this).parent('li');

显示锚标记和跨度都是li的子项，因此$（this）可以定义为＆＃39; a＆＃39;和＆＃39; span＆＃39;

最佳解决方案删除范围我不认为它们正在使用

Answer 2

尝试让自己更简单，这就是你想要做的事情吗？

http://jsfiddle.net/prn3gtqb/

<ul id="cssmenu">
<li><a href='#'><span>Home</span></a></li>
..</ul>

Jquery - 在<a> not </a> <a> <span></span></a>上将鼠标悬停在菜单上

2 个答案: