当我点击 div.post-read 并且再次点击然后隐藏它时，我有显示 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;}