jQuery SlideToggle 트리거 변경

Question

다음과 같이 달성하고 싶습니다. http://community.invisionpower.com/forum/1-news-and-information/ - 주제 위로 마우스를 가져 가면 오른쪽에 화살표가 표시되고 요약을 클릭하면 화살표 아이콘이 닫기 아이콘으로 변경됩니다.

지금까지 제작 한 번호는 http://jsfiddle.net/hfq4U/입니다. 제목 컨테이너를 가리키면 "요약보기"(- CSS)가 표시되고 요약을 토글합니다.

내 문제는 지금 (또는 로직 뒤에) 넣을 수 없다는 것이므로 '요약 표시'를 클릭하면 "요약 숨기기"로 바뀌며 여전히 거기에 남아있게됩니다. 내 마우스가 제목 컨테이너를 떠나는 경우. This link 정확히 달성하고 싶은 보여줍니다.

도움을 주시면 대단히 감사하겠습니다. Btw,이 기능을 위해 플러그인을 사용하고 싶지는 않습니다.

Answer 1

이것은 귀하의 코드입니다.

jQuery(document).ready(function($) { 
    $('.toggler').click(function() { 
     $('.summary').not($(this).prev()).slideUp(); 
     $(this).prev('.summary').slideToggle('slow'); 
    }); 
}); 

변경을 너무 ..

jQuery(document).ready(function($) { 
    $('.toggler').click(function() { 
     var _currentext = $('.toggler').html(); 
     if(_currentext == "Show Summary") { 
      $('.toggler').html("Hide Summary"); 
     } else { 
      $('.toggler').html("Show Summary"); 
     } 
     $('.summary').not($(this).prev()).slideUp(); 
     $(this).prev('.summary').slideToggle('slow'); 
    }); 
}); 

이 당신을 위해 잘 작동 희망 ...

Answer 2

귀하의 HTML

<div class="articles"> 
    <h3>Article Title 1</h3> 
    <div class="summary"> 
     This is the summary for Article 1. 
    </div> 
    <span class="static" style="display:none;">Show Summary</span> 
    <span class="toggler">Show Summary</span> 
</div> 

<div class="articles"> 
    <h3>Article Title 2</h3> 
    <div class="summary"> 
     This is the summary for Article 2. 
    </div> 
    <span class="static" style="display:none;">Show Summary</span> 
    <span class="toggler">Show Summary</span> 
</div> 

<div class="articles"> 
    <h3>Article Title 3</h3> 
    <div class="summary"> 
     This is the summary for Article 3. 
    </div> 
    <span class="static" style="display:none;">Show Summary</span> 
    <span class="toggler">Show Summary</span> 
</div> 

<div class="articles"> 
    <h3>Article Title 4</h3> 
    <div class="summary"> 
     This is the summary for Article a. 
    </div> 
    <span class="static" style="display:none;">Show Summary</span> 
    <span class="toggler">Show Summary</span> 
</div> 

<div class="articles"> 
    <h3>Article Title 5</h3> 
    <div class="summary"> 
     This is the summary for Article 5. 
    </div> 
    <span class="static" style="display:none;">Show Summary</span> 
    <span class="toggler">Show Summary</span> 
</div> 

귀하의 jQuery를 ..

jQuery(document).ready(function($) { 
    $('.toggler').click(function() { 
     var _currentext = $('.toggler').html(); 
     if(_currentext == "Show Summary") { 
      $('.toggler').html("Hide Summary"); 

      $('.static').hide();  
     } else { 
      $('.toggler').html("Show Summary"); 
      $('.static').html("Hide Summary"); 
      $('.static').show();    
     } 

     $('.summary').not($(this).prev()).slideUp(); 
     $(this).prev('.summary').slideToggle('slow'); 
    }); 
}); 

"Articile Title"아래에 텍스트가 나타납니다. 이제 CSS로 배치하십시오.