javascript - スライド後の戻るボタン

Question

前の div に戻るには、スライドに戻るボタンが必要です。いくつかのテストを行いましたが、成功しませんでした。

私のJSがあります

function SlideOut(element) {

$(".opened").removeClass("opened");
$("#" + element).addClass("opened");
$("#content").removeClass().addClass(element);

}
$("#content div").click(function () {
var move = $(this).attr('data-move');
SlideOut(move);
});

デモ リンクがあります: http://jsfiddle.net/VA5Pv/

ありがとう

Answer 1

歴史を作ることができました。汚いコードでフィドルを編集しましたが、アイデアはそこにあります：

var history = [];
var last;

$("#content div").click(function () {
    var move = $(this).attr('data-move');
    if (last) history.push(last);
    last = move;
    SlideOut(move);
});

$("#back").click(function () {
    SlideOut(history.pop());
    return false;
});

http://jsfiddle.net/VA5Pv/1/

基本的には、「移動」変数を履歴配列に保存します。前に戻りたい場合は、履歴配列から最後の値をポップします。

Answer 2

以下を試してください：

$('.anim button').click(function(){$(this).parent().removeClass('opened');});

これをdiv rougeのボタンに割り当てました。ただし、ターゲットは、ユーザーにクリックさせたい div 内の任意のものにすることができます...

ここを参照してください：JSfiddle

Answer 3

デモはこちら

<div id="fullContainer">
    <div id="right" class="anim"></div>
    <div id="rouge" class="anim">Hello world!
        <button class="close">Close</button>
    </div>
</div>
<div id="centerContainer">
    <div id="relativeContainer">
        <div id="content">
            <div data-move="right">Open Right</div>
            <div data-move="rouge">Open Rouge</div>
            <div id="back">Back</div>
        </div>

function SlideOut(element) {
    if(element == undefined) {
        $('#back').hide();
    }
    $(".opened").removeClass("opened");
    $("#" + element).addClass("opened");
    $("#content").removeClass().addClass(element);

}
$("#content div").click(function () {
    var move = $(this).attr('data-move');
    $('#back').show();
    SlideOut(move);
});