自定义手风琴幻灯片效果jQuery

Question

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

所以这就是我想要制作的东西。我已经有了自定义的多级手风琴。而我试图修改输出的行为。

与其逻辑相反（当我点击“标题”时，“子标题”和“内容”都会下降）

我想要的逻辑是（当我点击“标题”时，“标题”将向左滑动并显然被隐藏，“子标题”将替换标题的位置，并且点击“子标题”也会让“内容”替换“子标题”的位置，“子标题”也会向左移动，在关闭时它的行为将相反。它将向右滑动）

我知道我上面的解释有点混乱，因为我不知道怎么说得更好。:)但是我有下面这些图片来更好地说明我想说的内容。

粉色背景是主容器，也是“标题”、“副标题”和“内容”唯一可见的地方。粉色框外不会在输出中显示。

以下是我的jQuery代码简要介绍，因为如果没有一点代码的话我无法发布这篇文章 :)

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

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

更新：

我从下面的答案中得到了这个fiddle。这很好用，回答了我的问题，但是我有这样一种情况，我有许多标题以及子标题和内容。问题是我不知道如何处理这种情况。我对这种自定义手风琴非常陌生。

请检查我的更新fiddle。

- John

---

你打算如何在一个部分滑出视野后“关闭”它？ - Vince

关闭的效果就像我点击“标题”时，“子标题”会出现，那里的箭头也会变成一个新图标，通过点击该图标，它将返回到“标题”部分。希望我表述得清楚。 - John

实际上，先生，小提琴是客户的第一个要求，然后突然他改变了主意并以这种方式制作。我知道我必须更改我的HTML结构，但我对逻辑如何进行感到困惑。我真的不知道如何根据客户要求的新想法开始或制作它。 - John

可能会有帮助 http://jsfiddle.net/gnLduo61/2/ - Mohamed-Yousef

嘿@Mohamed-Yousef，非常感谢。我从你的代码片段中得到了一些想法。虽然它并不完全符合我的要求，但它给了我很大的帮助。谢谢 :) - John

Answer 1

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

jQuery代码的简要视图：

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

- John

Answer 2

你可以使用jQuery的.animate()函数结合一些CSS来实现这个效果。

HTML

<div class="row">
    <div class="level level-1">Header <i class="fa fa-chevron-right"></i>

    </div>
    <div class="level level-2"> <i class="fa fa-chevron-left"></i>
Sub-Header <i class="fa fa-chevron-right"></i>

    </div>
    <div class="level level-3"> <i class="fa fa-chevron-left"></i>

        <ul>
            <li>Content</li>
            <li>Content</li>
            <li>Content</li>
            <li>Content</li>
            <li>Content</li>
        </ul>
    </div>
</div>

CSS

.row {
    white-space : nowrap;
    width: 200px;
    overflow: hidden;
}
.level {
    display: inline-block;
    height: 900px;
    width: 200px;
    vertical-align: top;
}
ul {
    padding-left: 10px;
    margin-top: 0px;
}
i {
    cursor: pointer;
}

jQuery

$('i.fa-chevron-right').on('click', function () {
    $(this).closest('div').animate({
        marginLeft: '-200px'
    });
});

$('.level-2 > i.fa-chevron-left').on('click', function () {
    $('.level-1, .level-2').animate({
        marginLeft: 0
    });
});

$('.level-3 > i.fa-chevron-left').on('click', function () {
    $('.level-2').animate({
        marginLeft: 0
    });
});

jsFiddle: http://jsfiddle.net/voveson/ca7dsedp/

jsFiddle：http://jsfiddle.net/voveson/ca7dsedp/

- Vince

---

您好，感谢您的回答先生。我有一个问题。如果我有许多“子标题”，每个“子标题”都包含自己的“内容”，那么我该怎么做，当我单击特定的“子标题”时，它上面的“内容”将被显示。此外，如果我有许多“标题”，每个“标题”都包含自己的“子标题”，那么我该怎么做，当单击“标题”时，只会显示该标题包含的“子标题”。无论如何，感谢您的时间先生。请耐心地帮助我实现我的期望输出 :) 谢谢 - John

我有你更新的这个小样。http://jsfiddle.net/ca7dsedp/2/当我点击header1时，它只会显示subheader1，而当我点击subheader1时，它只会显示content1。谢谢您。 - John