jQuery 아코디언을 사용하면 더 쉬운 방법이 있습니까?

Question

저는 언젠가 만들려고 노력해온 기능에 어려움을 겪고 있습니다. 아이디어는 여기에 사용자가 작은 미리보기 + 머리글과 게시자 정보를 볼 수 있다는 것입니다. 그들은 헤드 라인을 클릭하여 기사로 확장하거나 "Comments"링크를 클릭하여 기사에 대한 설명으로 직접 확장 할 수 있습니다. 또는 원할 경우 헤드 라인을 클릭하여 기사를 확장 한 다음 댓글보기를 클릭하여 댓글을 볼 수 있습니다. 마지막으로 최신 뉴스를 볼 수있는 유연한 모듈 식의 개방형/폐쇄 형 시스템입니다. 여기

내가 작업했습니다 것입니다 : 이것은 내가가 촬영하고있는 무슨이다 http://notedls.com/pointtest.html

(나는 볼이 볼 수 있습니다 누구에게나에 미치는 쉽게 있도록 한 곳에서 내 모든 코드를 넣어)하지만, 그것은 내가 원하는 것과는 거리가 멀다. ( 1.8이 나와있는 jQuery 1.6 플러그인을 사용하고있다. 그러나 나는 이것에 관해서 주인이나 전문가가 될 수 없다. 나는 처음부터 다시 만들 수 있다고 생각하지 않는다. 이미이 플러그인을 편집하여 이처럼 작동하게했지만, 볼 수 있듯이 작성자와 댓글은 헤더에 대해 "태그"를 호출하기 때문에 팬에게 치명적인 영향을 미치기 시작합니다.

누구 이제 내가 현재 가지고있는 코드를 고칠 수있는 방법을 구상하거나 가능하게하는 더 쉬운 방법이 있습니까? 나는이 시점에서 필사적이다 ;;

Answer 1

뭔가를 얻을 느낌 :?

http://jsbin.com/elawu

alt text http://i41.tinypic.com/3518lxg.jpg

그것은 아코디언입니다. 각 "첫 번째 요소"또는 헤더는 div입니다. 헤더에는 기사 제목, 작성자 및 해당 기사에 대한 의견의 수를 나열하는 클릭 가능한 범위가 있습니다.

각 "두 번째 요소"또는 아코디언의 내용 부분은 div입니다. 해당 div 내에서 기사 콘텐츠 div 및 의견 div가 있습니다. 댓글 div에는 댓글 헤더가 있으며 다시 클릭 할 수 있고 다른 콘텐츠 div가 있습니다. 계층 구조는 다음과 같습니다

<div id='outer-accordion'> 
    <div class='header'> 
     <p>Article headline</p> 
     <p>by: Author</p> 
     <p><span class='clickable'># comments</span></p> 
    </div> 
    <div class='content'> 
     <div class='article'>...</div> 
     <div class='comments'> 
     <p><span class='clickable'># of comments</span></p> 
     <div class='comment-content'> 
      comment #1 
      comment #2 
      ... 
     </div> 
     </div> 
    </div> 

    .... 

페이지가 모든 코멘트 콘텐츠 div의이 또한 아코디언이 설정됩니다 $('div.comments div').hide();를 통해 숨겨진 얻을 시작하고, 아코디언 onaccordionchange 및 onaccordionchangestart 이벤트가 바운드 얻을 때. 마지막으로, 코멘트 링크에 ​​대한 클릭 이벤트가 등록됩니다.

헤더의 아무 곳이나 클릭하면 연결된 아코디언 콘텐츠 탭이 열립니다. 헤더의 주석 링크를 클릭하면 아코디언이 열리고 및이 내용 div에서 주석 div를 엽니 다.

아코디언 탭을 열면 언제든지의 댓글 링크 이 숨겨집니다. 아코디언 탭이 닫히면 헤더의 주석 링크가 표시됩니다.

아코디언 콘텐츠 div 내의 댓글 링크를 클릭하면 실제 댓글을 토글합니다.

Answer 2

오, 난 이런이

$('.author').click(function() { 
    $(this).parent().find('.authordiv').toggleClass('hidden'); 
}); 
$('.comments').click(function() { 
    $(this).parent().find('.commentsdiv').toggleClass('hidden'); 
}); 

및 사용 숨겨진 CSS 클래스

.hidden { 
    display:none; 
}