Question

我正在尝试创建一个菜单，当单击一个菜单项并且它有一个子菜单时，它将向下移动列表中的当前项并将子菜单滑动到位。唯一的问题是我只想在单击下移后的列表项

我正在尝试创建一个滑动菜单，当您单击列表项并且它有一个子菜单时，单击后的列表项将向下移动，子菜单将滑入列表正下方的位置单击的项目。问题是我只希望根据子菜单的大小向下移动更多的列表项。

这是我已经拥有的jquery

$(document).ready(function() {
$('.button-wrapper').click(function(e) {
    $('.menu > li:nth-child(1)').toggleClass('first');
    $('.menu > li:nth-child(2)').toggleClass('second');
    $('.menu > li:nth-child(3)').toggleClass('third');
    $('.menu > li:nth-child(4)').toggleClass('fourth');
    $('.menu > li:nth-child(5)').toggleClass('fifth');
    $('.sub-menu li').removeClass('sub-first');
    $('.sub-menu li').removeClass('sub-second');
    $('.sub-menu li').removeClass('sub-third');
});

$(".menu a").click(function(e) {
    if($(this).next('.sub-menu').length > 0) {
        e.preventDefault();
        $('.sub-menu > li:nth-child(1)').toggleClass('sub-first');
        $('.sub-menu > li:nth-child(2)').toggleClass('sub-second');
        $('.sub-menu > li:nth-child(3)').toggleClass('sub-third');
        $('.sub-menu').closest('li').next().toggleClass('daniel');
    }
    else  {
        return true
    }
});

});

我附上了一个小提琴http://jsfiddle.net/uNuKF/来表明你现在想要的。您会注意到所有子菜单都会滑动，但我只想要点击的那个滑动，但不包括将来的子菜单

Answer 1

你几乎就在那里，但你的功能是找到所有.sub菜单项而不仅仅是适当的子菜单：

变化：

$('.sub-menu > li:nth-child(1)').toggleClass('sub-first');
... etc

有关：

$(this).next('.sub-menu').find('li:nth-child(1)').toggleClass('sub-first');
... etc

This updated Fiddle包括上述修复和揭示动画。

使用jquery将子菜单向下移动，多少取决于列表项的数量

1 个答案: