我正在尝试构建至少 4 级菜单(无限制)。我的愿望是使用 jQuery 在菜单上创建一个通用的递归操作。当我悬停子元素时,父元素的高度会增加,当悬停任何孙子或曾孙子时,我也希望得到相同的结果,相同的父元素保持高度增加,而不是孙子或曾孙子女。
我试过这个:http: //jsfiddle.net/dTqX3/
看起来我需要别的东西而不是
$(this).parent().parent().parent().find("a:first")
这工作不正确。
任何帮助都感激不尽!
我正在尝试构建至少 4 级菜单(无限制)。我的愿望是使用 jQuery 在菜单上创建一个通用的递归操作。当我悬停子元素时,父元素的高度会增加,当悬停任何孙子或曾孙子时,我也希望得到相同的结果,相同的父元素保持高度增加,而不是孙子或曾孙子女。
我试过这个:http: //jsfiddle.net/dTqX3/
看起来我需要别的东西而不是
$(this).parent().parent().parent().find("a:first")
这工作不正确。
任何帮助都感激不尽!
根据您的 DOM 结构,您需要爬上树到<ul>
祖先(被悬停的项目的容器)并找到作为其兄弟的锚点(导致该容器显示的更高级别的菜单项),转换为:
$(this).closest("ul").siblings("a")
有了这个改变,它似乎工作得很好。
在从@Jon 那里得到了一些很好的指导之后(非常感谢!)我尝试了像.parentsUntil()和.parents()这样的函数。仍然没有找到预期的结果,但我有可能知道这个递归父计数是如何工作的。我保持原样.parents()
并补充道.last()
。下一个代码成功了:
$(this).parents('ul > li').last().find("a:first").attr('style', 'height:55px;line-height:55px;');
这是重要的部分:
$(this).parents('ul > li').last().find("a:first")