Question

这是我的问题。

HTML

    <ul id="content">
      <li id="item1">
        <ul id="menu">
          <li id="menu-item1">
            <ul class="sub-menu">
              <li>........</li></ul></li>
....................................................
          <li id="menu-item10">
            <ul class="sub-menu">
              <li>........</li></ul></li>
        </ul></li>
    </ul>

如何通过以下方式更改每个ul＃子菜单的css顶部？

1-sub menu top: -8px
2-sub menu top: -40px
3-sub menu top: -72px
step = -32px
and so on ...
10-sub menu top: - ###px

对不起家伙我发现我的语法错误....这是我的代码。如果你有更好的一个，我将不胜感激;）

$('ul.sub-menu').each( function() {
    $(this).css('top', (-8 + $(this).index('ul.sub-menu') * -32));
});

Answer 1

您可以在文档就绪方法中使用以下功能，例如

jQuery('ul#content ul[id=sub-menu]').each(function(){
    jQuery(this).css('top', jQuery('>li',jQuery(this).parent().parent()).index(jQuery(this).parent())*-32-8)
});

注意：它复杂但工作正常，请点击此处http://jsfiddle.net/siddhapura/reud3Lre/

Answer 2

尝试此操作并不完全像您想要的Fiddle

var len = $('ul').length;
var top = 1;
$('.sub-menu').each(function () {


$(this).css({
    top: top
})
top = top + top +8
})

Answer 3

使用CSS可以做到这一点：

ul#menu{
    margin-top:-24px;
}
ul#sub-menu{
    margin-top:32px;
}

<ul id="menu">
        <li id="menu-item1">
            <ul id="sub-menu">
                <li>........</li>
            </ul>
        </li>

        <li id="menu-item2">
            <ul id="sub-menu">
                <li>........</li>
            </ul>
        </li>
    
        <li id="menu-item3">
            <ul id="sub-menu">
                <li>........</li>
            </ul>
        </li>
 </ul>

jQuery - 按另一个元素内部元素的出现顺序样式？

3 个答案: