Question

对于那些不能在这里等待的人fiddle：）

所以这就是我想要做的。我已经拥有这款定制的多级手风琴。而我试图修改我的输出是手风琴的行为。

而不是逻辑（当我点击“标题”时，“子标题”下降以及“内容”）

我希望逻辑（当我点击“标题”时，“标题将向左滑动，显然是隐藏，”子标题“将替换标题的位置以及单击“子标题”也会让“内容”替换“子标题”和“子标题”的位置也向左移动，在关闭时它将反之亦然。它将滑动到右）

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

粉红色背景是主要容器，也是唯一可以看到“标题”，“子标题”和“内容”的地方。 粉红色框之外的输出不可见。

enter image description here

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

非常感谢您的回答。提前谢谢你：）

更新：

我从 vCode 的答案中得到了这个小提琴。这很好，它回答了我的问题，但我有这种情况，我有很多标题以及子标题和内容。问题是我不知道如何处理这种情况。我是这种定制手风琴的新人。

请查看我更新的fiddle。

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

Answer 2

你可以使用jQuery的POJO.someProperty.somekey函数和一些css来完成这个任务。

HTML

.animate()

CSS

<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>

的jQuery

.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;
}

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

定制手风琴幻灯片效果jquery

2 个答案:

HTML

CSS

的jQuery