jQuery로 항목 목록 펼치기/접기

Question

페이지에 블로그 글 목록이 있으며 각 사용자에 대한 세부 정보를 확장/축소 할 수 있어야합니다. next()와 같은 옵션을 둘러 보았지만 각 블로그 게시물의 구조는 실제로 형제를 허용하지 않습니다.

<div class="post"> 
    <div class="controls"> 
      <ul> 
       <li>Permalink</li> 
       <li><a href="#" class="showcomments">Comments</a></li> 
      </ul> 
    </div> 
    <div class="comments">Comments go here</div> 
</div> 

는 한 페이지에서 이러한 게시물의 무제한을 가지고, 그래서 그것을 만드는 간단한 기능을 필요 그래서 나는 어떤 후, 해당에 대한 .comments 패널은 "댓글"링크를 클릭하면 게시물이 펼치기/접기 (해당 링크를 클릭하면 해당 댓글 div가 전환됩니다).

Answer 1

대상 링크는 해당 게시물의 의견을 슬라이딩을 전환하고, 최대 다른 모든 의견을 밀어

$(.showcomments).on("click", function() { 
    $(this).parent().parent().find(".comments").show(); 
} 

아이디어는 점입니다 클릭하여 콜백을 설정하고, 내부에서는 각 요소가 조부모를 찾고 주석 섹션을 검색하고 표시합니다.

Answer 2

HTML의 구조를 수정할 수없는 경우 클릭 이벤트 대상 (앵커)에서 해당 컨테이너 (li)까지 최대 ITS 컨테이너 (ul)까지 DOM을 탐색해야합니다.) 최대 ITS 컨테이너 (div.controls) 다음 div.com을 찾으려면 다음(). jQuery를 사용하면 매우 쉬운 체인을 만들 수 있지만 분명히 다소 취약합니다.

HTML의 구조를 수정할 수 있다면 더 좋은 옵션을 사용할 수 있으며 ID 및 데이터 속성을 사용하여 DOM 통과의 오버 헤드를 피할 수 있습니다. 이 트릭을 할 수

$('.showcomments').on('click', function(e) { 
    e.preventDefault(); 
    var comment = $(this).closest('.post').find('.comments'); 
    $('.comments').not(comment).slideUp(); 
    comment.slideToggle(); 
}); 

Answer 3

: