1
我点击div.post-read时,显示div.post-text的全部内容,再次点击后隐藏它的功能。 但是有些东西不能正常工作,当我用第一个文字做这件事时,一切都很好,但如果我在第一或第三个打开时点击第二或第三个,那么它不会滑回或有时不会打开。 我的功能有什么问题?多个div的jQuery切换功能
$(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;}
$(this).prev()。hide(); $(this).prev()。slideToggle(“slow”); 所以你隐藏它,隐藏之后,你再次用滑动运动显示它。 – Timmetje 2013-02-12 15:23:46