Question

我有一个相当简单的菜单结构，一层深，使用UL / LI制作如下......

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

菜单以垂直方式显示，悬停时展开，其基本格式与此处显示的垂直suckerfish演示完全相同：http://htmldog.com/articles/suckerfish/dropdowns/example/vertical.html

我想要做的是，使用jQuery，自动将一个类应用于每个子菜单的LI，并具有相应的菜单项高度。例如，子项目1位于菜单项3旁边，这将使其成为“高度”3.子项目2的“高度”为4.菜单项4的子菜单2的“高度”为5.等等。 / p>

我这样做的原因是子菜单项需要具有适合背景的css样式 - 菜单是弯曲的 - 所以他们需要应用一个类，所以样式将是正确的高度。

我相当确定所需的代码不应该太大 - 它只需要为每个子li添加一个样式'height1'或'height2'等类，我只是想不到从哪里开始我自己作为我的javascript技能仍然有点简陋！

提前致谢！

Answer 1

这样的事情应该可以解决问题。只需将#nav替换为您的UL的ID。此外，这假定零索引高度（height0，height1，height2等）。

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');
});

使用jQuery自动将“高度”数据应用于子菜单

1 个答案: