jquery 토글이 무한 스크롤 및 석조로 작동하지 않습니다.

Question

기본 설정은 링크를 클릭 할 때 슬라이드하는 추가 정보가있는 일련의 div입니다. 항목의 첫 페이지에는 잘 작동하지만 추가 항목은 숨겨진 div 표시로 표시되며 토글 링크 js는 작동하지 않습니다. 확인

$(".hidden_info").hide(); 
$(".toggle_link").click(function(event) { 
    event.preventDefault(); 
    $(this).closest(".item").find(".hidden_info").slideToggle("slow"); 
}); 

var $container = $('#content'); 

$container.imagesLoaded(function(){ 
    $container.masonry({ 
    itemSelector: '.item' 
    }); 
}); 

$container.infinitescroll({ 
navSelector : "div.navigation", 
nextSelector : "div.navigation a:first", 
itemSelector : "#content div.item", 
    loading: { 
         msgText : "Loading new products...", 
       finishedMsg: 'No more products to load.', 
      } 
}, 
function(newElements) { 
var $newElems = $(newElements).css({ opacity: 0 }); 
$newElems.imagesLoaded(function(){ 
    $newElems.animate({ opacity: 1 }); 
    $container.masonry('appended', $newElems, true); 
}); 
}); 

-edit- I 토글 양태 CSTE 연구진의 방법을 사용하여 작업이있다. 새 코드는 다음과 같습니다.

$(document).on("click", ".toggle_link", function(event) { 
    event.preventDefault(); 
    $(this).closest(".item").find(".hidden_info").slideToggle("slow"); 
}); 

하지만 .hide 항목이 올바르게 작동하지 않습니다. 위의 콘텐츠가 기본적으로 표시되도록 숨겨진 콘텐츠를 전환 할 수 있습니다.

Answer 1

따라서 절대적으로 상대적으로 배치 된 요소를 전환하는 것은 요소의 동적 높이로 인해 좋은 옵션이 아닙니다. 그래서 나는 인라인 스타일의 디스플레이를 사용했다. 숨겨진 div에는 아무 것도 없었다. 자바 스크립트를 사용하지 않는 사람들을위한 접근성 때문에 내가 가장 좋아하는 선택이 아닙니다. 그러나 그것은 효과적이다.