[英]Jquery - Menu mouse over on <a> not <a> <span>
我在此页面上破解了以下菜单: 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 tag和span都是li的子代,因此$(this)可以定义为“ a”和“ span”
最好的解决方案删除跨度我不认为他们正在使用
尝试使事情变得更简单,这是您想做的吗?
<ul id="cssmenu">
<li><a href='#'><span>Home</span></a></li>
..</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.