添加的div在切换文本后消失

Question

我有一个我们切换可见性的计划日期列表。它们作为完整列表加载（对于非js后备），然后在准备好文档时，JQuery隐藏除第一个日期以外的所有内容，将标题更改为Next Date，并向日期列表的父div添加“show more”div。

该脚本设置为切换，它显示所有日期，更改标题，显示更多文本，然后恢复为隐藏版本。切换功能的一切工作正常....除了......附加的div消失时，第二切换功能发生。我不确定它是否被删除或者只是隐藏。

如果我将show more div编码到html中，它会像编码一样来回切换。但作为追加，它在切换结束时消失。

我的HTML：

<div class="title">Scheduled Dates</div> 
<div class="dates"> 
<div id="1">23 May 2011</div> 
<div id="2">25 June 2011</div> 
<div id="3">28 Aug 2011</div> 
<div id="4">15 Nov 2011</div> 
</div> 

的JS：

$(".dates div:not(#1)").hide(); 
$(".title").text("Next Departure"); 
$(".dates").append('<div class="datesctrl">show more</div>'); 

$(".datesctrl").toggle(function(){ 
    $(".dates div").show(); 
    $(".datesctrl").text("Show Less"); 
    $(".title").text("Scheduled Dates"); 

}, function(){ 
    $(".dates div:not(#1)").hide(); 
    $(".datesctrl").text("Show More"); 
    $(".title").text("Next Departure"); 

}); 

有什么建议？

Answer 1

当你在你的评论人说你打算追加“显示更多”后的日期，这是可以做到：

$(".dates").after('<div class="datesctrl">show more</div>'); 

正如另一项建议，我建议改变

$(".dates div:not(#1)").hide(); 

到

$(".dates div").not(':first-child').hide(); 

它只是更具可读性。此外，它将与所有日期类别的div一起使用。

例如这里：http://jsfiddle.net/A3fXv/

Answer 2

您附加的div与隐藏回调中的$(".dates div:not(#1)")选择器相匹配。