多个 div 的 jQuery 切换功能

Question

当我点击 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;}

Answer 1

改变这个

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

到这里

if ($(this).html() == 'Read more') {

见DEMO。