效果基本show不工作的有效jQuery的对象

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