代码之家 › 专栏 › 技术社区 › Meep3D

使用jquery自动将“高度”数据应用到子菜单

html jquery javascript

Meep3D · 技术社区 · 16 年前

我有一个相当简单的菜单结构,一级深,使用下面的ul/li制作…

菜单项1
菜单项2
菜单项3
- 子项目1
- 子项目2
- 子项目3
菜单项4

菜单以垂直方式显示,悬停时滚动,基本格式与此处显示的垂直吸盘鱼演示完全相同: http://htmldog.com/articles/suckerfish/dropdowns/example/vertical.html

我要做的是,使用jquery,使用菜单项的相应高度自动将类应用于每个子菜单的li。例如,子项1位于菜单项3旁边,这将使其成为“高度”3。子项2的“高度”为4。菜单项4的子菜单2的“高度”为5。等。

我这样做的原因是子菜单项需要有一个与背景相匹配的CSS样式-菜单是弯曲的-因此它们需要应用一个类,以便样式适合它们的高度。

我相当肯定所需的代码不应该太大——它只需要添加一个样式“height1”或“height2”等类。对于每个子li,我只是想不出从哪里开始,因为我的javascript技能还是有点初级!

事先谢谢!

1 回复 | 直到 16 年前

Aaron 16 年前

像这样的事情应该会奏效。换掉导航系统和你的保险商实验室的身份。此外,这假设为零索引高度(高度0、高度1、高度2等)。

function applyHeightClasses( el, offset ){
  if(! ( offset > 0 ) ) offset = 0;

  $( el ).children( 'li' ).each( function( i ) {
    $(this).addClass( 'height' + ( offset + i ) );

    $(this).children( 'ul' ).each( function( x ) {
      applyHeightClasses( this, ( offset + i + x ) );
    });

  });
}

$(document).ready(function() {
  applyHeightClasses('#nav');
});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前