我正在破解此页面上的以下菜单: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();
}
});
我遇到的问题是,当鼠标指针悬停在“li.has-sub a”上时,它会很好地展开,但当鼠标指针悬停在“li.has-sub a span”上时,它也会再次触发。如何防止链接内也触发事件?
这是 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>
非常感谢任何帮助。
最佳答案
我认为问题在于您如何定义 var 元素,因为
var element = $(this).parent('li');
显示 anchor 标签和 span 都是 li 的子标签,所以 $(this) 可以定义为 'a' 和 'span'
最佳解决方案删除 span 我认为它们没有被使用
关于javascript - Jquery - 菜单鼠标悬停在 <a> 而不是 <a> <span>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25866215/