0

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

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

这是我已经拥有的 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/来表明你想要我目前拥有的。您会注意到所有子菜单都在滑动，但我只希望被点击的那个不包括未来的子菜单

4

1 回答 1

1

您快到了，但您的功能是查找所有 .sub-menu 项，而不仅仅是适当的子项：

改变：

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

为了：

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

这个更新的 Fiddle包括上述修复和显示动画。

于 2013-10-20T10:49:53.310 回答