mootools 슬라이드 코드의 문제점은 무엇입니까?

Question

mootools를 사용하여 아코디언 형식 콘텐츠 섹션을 만들고 있습니다.

<div class="content-add"> 
    <div class="item html 18" id="dditem_26"> 
     <a id="ddlink_26"></a> 
     <a href="#" class="open ddheader"><strong>F. Tony Hosseini</strong></a> 
     <p>F. Tony Hosseini is the Founder and Chairman of the FTH Group of companies. He has over 30 years of experience in international business development, finance and private syndication work, developing and syndicating over $500 million dollars of industrial, commercial and residential projects around the world.</p> 
     <p>Before coming to the United States, Tony lived in Iran (Persia) where he served as the project Quality Control officer for National Construction Company, developing the natural gas line between Iran and the USSR. He was also a General Partner for Iran-America Insurance Company, a multi-line insurance operation in the southern region of Iran.</p> 
    </div> 
    <div class="item html 19" id="dditem_25"> 
     <a id="ddlink_25"></a> 
     <a href="#" class="open ddheader"><strong>Robert J. O'Leary</strong></a> 
     <p>Robert J. (Bob) O'Leary is Vice Chairman of the FTH Group of companies. He also serves as a partner at Insignia Building, LLC, a leading construction company operating in high-end residential communities in the Carolinas. Bob brings with him over 30 years to the field of corporate public affairs, including communications, government affairs and brand management.</p> 
     <p>A native of Pennsylvania, Bob is a graduate of Penn State University, where he was named an Alumni Fellow. He serves on the Board of Visitors of the university's College of Communications, the college's campaign development committee, and regularly guest lectures and mentors students at the university. He resides in Greenville, South Carolina.</p>    
    </div> 
</div> 

목표는 a.open 클릭 할 때마다 '개방'슬라이드 아웃 또는 (토글)에서의 클래스와 각 < > 아래의 모든 컨텐츠를 확인하는 것입니다 : 여기에 내가 함께 일하고 있어요 HTML입니다. 여기에 내가 지금까지 가지고있는 Mootools의의 JS입니다 :

$$('#content a.open').each(function(_link,i){ 
    var _slide = _link.getNext('div.slide'); 
    _slide.fx = new Fx.Slide(_slide).hide(); 
    _link.addEvent('click', function(){ 
     _link.toggleClass('open-slide'); 
     _slide.getParent('.contentcol').getElements('.slide').each(function(slide) { 
      slide.slide('out'); 
     }); 
    _slide.fx.toggle(); 
}); 

슬라이더는 대부분의 시간을 제외하고, 슬라이드는 슬라이드 동안 같이 매우 고르지와 "화려한"이며, 예상대로 "작동"

, 내용은 무작위 것 사라지고 빠르게 다시 나타납니다. 예를 들어 http://fthgroup.blueinkcms.com/about_us/leadership_team#을보고 이름 중 하나를 클릭하십시오.

내가 잘못하고있는 아이디어가 있습니까?

Answer 1

게시 한 코드가 사이트의 마크 업과 일치하지 않습니다. 가능한 경우 mootools 1.2.4로 업그레이드해야합니다.

어쨌든이 문제와 Fx.Slide의 성능 저하 문제 (사이트의 원본 파일을 통해)를 해결하려면 처음부터 다시 작성하는 것보다 시간이 오래 걸렸을 것입니다.

http://www.jsfiddle.net/P9zJa/ ->이 코드는 잘 작동하며 클래스를 사용하기 위해 다시 작성되었습니다. 몇 가지 아이디어가 있기를 바랍니다. 거의 또는 전혀 변경하지 않고 html로 개선하지만 메모는 p을 div.content

으로 감쌌습니다.