div.post-readをクリックすると、div.post-textの全内容を表示し、もう一度クリックして非表示にする機能があります。しかし、何かが正しく機能しません。最初のテキストでそれを行うと、すべてがうまく機能しますが、最初が開いているときに2番目または3番目をクリックすると、スライドしないか、時々開かないことがあります。私の機能の何が問題になっていますか？
$(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;}