slideUp не работает на действительной JQuery-Object

Question

Я следующий JavaScript/JQuery-фрагмент:

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> 

Теперь ... когда я нажмите на мое «Показать», появится первый ящик, и я смогу закрыть/скрыть окно. Нажав «Далее», отобразится второе поле. Проблема в том, что я не могу скрыть второй ящик. Когда я пытаюсь использовать alert(active.html()), я всегда получаю правильный html-код активного объекта. Я также могу позвонить hide(), а второй ящик будет скрыт, но просто нет slideUp() ... почему? Я получаю действительный объект jQuery.

Answer 1

Попробуйте

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").first(); //minor tweak here, if there is no active item activate the first 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 
    } 
})(); 

Демо: Fiddle