여러 div의 jQuery 토글 기능

Question

div.post-read를 클릭하면 다시 div.post-text를 클릭하고 숨길 때 div.post-text의 전체 내용을 보여주는 기능이 있습니다. 하지만 뭔가 제대로 작동하지 않습니다. 첫 번째 텍스트는 모두 훌륭하게 작동하지만 두 번째 또는 세 번째를 클릭하면 첫 번째 텍스트가 열릴 때 슬라이드가되지 않거나 때때로 열리지 않습니다. 내 기능에 문제가 있습니까?

$(document).ready(function() { 
var read = $(".post-read"); 
     read.click(function() { 
      if (read.html() == 'Read more') { 
       $(this).html("Show less"); 
       $(this).prev().removeClass('post-text').addClass('post-text-open'); 
       $(this).prev().hide(); 
       $(this).prev().slideToggle("slow"); 
      } else { 
       $(this).html("Read more"); 
       $(this).prev().removeClass('post-text-open').addClass('post-text'); 
       $(this).prev().hide(); 
       $(this).prev().slideToggle("slow"); 
      } 
      }); 
     });  

HTML :

<div id="posts"> 
       <div class="post"> 
        <div class="post-img"> 
         <img alt="" src="img/post-pic.png"> 
        </div> 
        <div class="post-text">text ... ... ...</div> 
        <div class="post-read">Read more</div> 
        <div class="clear"></div> 
       </div> 
       <div class="post"> 
        <div class="post-img"> 
         <img alt="" src="img/post-pic.png"> 
        </div> 
        <div class="post-text">text ... ... ...</div> 
        <div class="post-read">Read more</div> 
        <div class="clear"></div> 
       </div> 
       <div class="post"> 
        <div class="post-img"> 
         <img alt="" src="img/post-pic.png"> 
        </div> 
        <div class="post-text">text ... ... ...</div> 
        <div class="post-read">Read more</div> 
        <div class="clear"></div> 
       </div> 
      </div> 

CSS :

.post-text {float: left;width: 457px;padding-left: 16px; overflow:hidden; height:72px;} 
.post-text-open {float: left;width: 457px;padding-left: 16px; overflow: auto; height:auto;} 

Answer 1

변경이

if (read.html() == 'Read more') { 

이

에210

DEMO을 참조하십시오.