jquery - 自定义 Accordion 幻灯片效果jquery

Question

对于那些迫不及待的人，这是我的 fiddle :)

这就是我想要做的。我已经有了这个定制的多级 Accordion 。我试图修改我的输出的是 Accordion 的行为。

而不是逻辑(当我点击“标题”时，“子标题”和“内容”一起下降)

我想要的逻辑是(当我点击“header”时，“header”会向左滑动，显然是隐藏的，“sub-header”会取代header的位置以及单击“子标题”也会让“内容”替换“子标题”的位置，“子标题”也会向左移动，关闭时反之亦然。它将滑动到对)

我知道我上面的解释有点乱，因为我真的不知道如何正确地说出来。 :) 但我在下面有这张图片来说明更多我想说的话。

粉红色 背景是主容器，也是“标题”、“子标题”和“内容”可见的唯一位置。 粉红色框外的输出不可见。

我的 jQuery 代码的简要 View ，因为我不能不放一点代码就发布它:)

jQuery:

 $('body').on('click', '.title-a1', function() {
        $('.box-a5').slideUp();
        $('.in').show();
        $('.out').hide();
        var currentv1 = $(this).closest('.box-a2').find('.box-a5');
        var triggerv1 = $(this).find('.in');
        var triggerv2 = $(this).find('.out');

        if (currentv1.is(':visible')) {
            currentv1.slideUp();
            triggerv1.show();
            triggerv2.hide();
        } else {
            currentv1.slideDown();
            triggerv1.hide();
            triggerv2.show();
        }
    });

非常感谢您的回答。提前谢谢你:)

更新:

我从下面的 vCode 答案中得到了这个 fiddle 。这很好用，它回答了我的问题，但我有这种情况，我有很多标题、子标题和内容。问题是我不知道在那种情况下该怎么做。我对这种定制 Accordion 很陌生。

请查看我更新的fiddle .

Answer 1

对于那些和我有同样问题的人，我已经解决了这个问题。检查this出。

jQuery 代码的简要 View :

$('.wrapper-l1 h1').on('click', function () {
    var c = $(this).attr("class");
    $("#" + c).show();

    $(this).closest('div').animate({
        marginLeft: '-400px'
    });
});


$('.wrapper-l2 div h1').on('click', function() {
    var d = $(this).attr("class");
    $("#" + d).show();

    $('.wrapper-l1, .wrapper-l2').animate({
        marginLeft: '-400px'
    });
});

$('.wrapper-l2 div .rights-a1').on('click', function() {
    $('.wrapper-l1, .wrapper-l2').animate({
        marginLeft: 0
    });
    $('.wrapper-l2 div').fadeOut();
});

$('.wrapper-l3 div .rights-a2').on('click', function() {
    $('.wrapper-l2, .wrapper-l3').animate({
        marginLeft: 0
    });
    $('.wrapper-l3 div').fadeOut();
});