javascript - 有効なjQuery-ObjectでslideUpが機能しない

Question

私は次のjavascript/jquery-snippetを持っています:

var msg = (function() {
    var active = null;
    var toggleBox = function(parent) {
        if (active != null) {
            if (active.next().length) {
                active.slideUp("fast", function() {
                    active = active.next();
                    active.slideDown("fast");
                });
            } else hideBox();
        } else {
            parent.show();
            active = $(".myBox");
            active.slideDown("fast");
        }

    }
    var hideBox = function() {
        if (active != null) {
            active.slideUp("fast"); // doesn't work :(
            // hide parent, too... but it's not necessary here...
        }
    }
return {
    toggleBox : toggleBox,
    hideBox : hideBox
}
})();

および次のいくつかの html タグ:

<div onclick="msg.toggleBox($('#parent'))">Show</div>
    <div id="parent" style="display: none;">
        <div class="myBox" style="display: none;">
            Message 1
            <div onclick="msg.toggleBox($('#parent'))">Next</div>
            <div onclick="msg.hideBox()">Hide</div>
    </div>
    <div class="myBox" style="display: none;">
        Message 2
        <div onclick="msg.hideBox()">Hide</div>
    </div>
</div>

今...「表示」をクリックすると、最初のボックスが表示され、ボックスを閉じる/非表示にすることができます。「次へ」をクリックすると、2 番目のボックスが表示されます。問題は、2 番目のボックスを非表示にできないことです。使用しようとするalert(active.html())と、常にアクティブなオブジェクトの正しい html コードを取得します。私も呼び出すことができhide()、2 番目のボックスは非表示になりますが、単純にそうではありませんslideUp()...なぜですか? 有効な jQuery-Object を取得しています。