Question

我有一个预定日期列表，我们可以切换其可见性。它们作为完整列表加载（对于非js后备）然后在文档就绪时JQuery隐藏除第一个日期之外的所有日期，将标题更改为下一个日期并将“显示更多”div添加到日期列表的父div。

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

如果我将show更多的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

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

Answer 2

正如您在其中一条评论中所说，您打算在日期之后附加“显示更多”，这可以完成：

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

正如另一个建议，我建议更改

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

到

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

它只是更具可读性。此外，它适用于所有具有日期类别的div。

示例：http://jsfiddle.net/A3fXv/

在内部切换文本后，附加的div消失了

2 个答案: