텍스트를 내부에서 토글 링 한 후 첨부 된 div가 사라짐

나는 가시성을 토글하는 예정된 날짜 목록을 가지고 있습니다. JQuery는 문서 준비가 완료되면 첫 번째 날짜를 제외한 모든 것을 숨기고 제목을 다음 날짜로 변경하고 날짜 목록의 상위 div에 "show more"div를 추가합니다.텍스트를 내부에서 토글 링 한 후 첨부 된 div가 사라짐

스크립트는 토글로 설정되어 모든 날짜를 표시하고 제목을 변경하며 텍스트를 더 표시 한 다음 숨겨진 버전으로 되돌립니다. 모든 기능을위한 토글 기능은 잘 작동합니다 ... 예외 ... 두 번째 토글 기능이 발생하면 추가 된 div가 사라집니다. 제거되거나 단순히 숨겨 지는지 확신 할 수 없습니다.

쇼에 더 많은 div를 HTML로 코딩하면 코드가 앞뒤로 전환됩니다. 그러나 append로서 토글이 끝날 때 사라집니다.

내 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"); 

});

어떤 제안?

출처

2011-05-06 Tom

당신은 추가 할 수 있습니다 후 날짜, "더보기"의미 : 나는 변경하는 것이 좋습니다

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

을 그냥 다른 제안으로를

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

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

좀 더 읽기 쉽습니다. 플러스 그것은 날짜의 클래스와 모든 사업부와 함께 작동합니다. 여기

예 : http://jsfiddle.net/A3fXv/

출처

2011-05-06 04:39:10

좋은 아이디어. .after를 사용하면 여분의 래퍼 div를 제거하여 html에 몇 바이트를 절약 할 수 있습니다. – Tom

Tom, 당신의 문제에 대해 조금 생각한 후, 이것을 확인해보십시오. http://jsfiddle.net/A3fXv/2/ 같은 페이지에 여러 개의 "날짜"div가있을 수있게하는 것이 더 쉽습니다. 실제로는 다소 그렇습니다. 현재 설정으로는 어려움. 다른 것이 없다면 jQuery 여행에 사용할 다른 도구를 제공 할 것입니다. –

추가 코드 아이디어를 보내 주셔서 감사합니다. 배울수록 더 많이 볼 수 있습니다. 이 프로젝트에는 우리가 조작하고있는 목록이 하나뿐입니다. – Tom

div이 숨기기 콜백의 $(".dates div:not(#1)") 선택기와 일치합니다. 당신이 당신의 의견 중 하나에 말했듯이

출처

2011-05-06 04:20:31

나는 사업부 생각 :하지 (# 1) div의 만 안쪽에 날짜를 적용하거나 첨부 DIV 날짜 안에 추가되는? 내가 잘못 붙인거야? – Tom

예 div를 날짜 안에 추가합니다. –

좋아, 나는 다른 div 안에 날짜를 감쌌다. 둘 다 감사합니다! – Tom

텍스트를 내부에서 토글 링 한 후 첨부 된 div가 사라짐

답변

관련 문제