这是我的HTML:
<a href="#">Read more</a>
<div class="moreDetails">
<p class="additionalText">Some text help here, random length.</p>
<p class="author">
<span class="bolder"><a href="minidashboard.php?user_url=http://url.people/1332517">Name</a>
</span>
</p>
<div class="replies">
<span>
<a href="topic.php?id=http://url/topics/1049198">1</a>
</span>
</div>
然后我使用jQuery在.additionalText
div的文本超过36个字符时添加一个类。
jQuery的:
$('.moreDetails p.additionalText').filter(function () {
if ($(this).text().length > 32) {
$(this).addClass('trim');
}
});
我现在想要的是点击<a href="#">Read more</a>
时要删除的课程.trim
并显示内容。
.trim
将段落设置为固定高度,溢出设置为隐藏。
答案 0 :(得分:5)
您可以为该链接指定一个类,如下所示:
<a class="readMore" href="#">Read more</a>
然后添加一个点击处理程序,如下所示:
$("a.readMore").click(function() {
$(this).next().find('.additionalText').removeClass('trim');
});
这可以通过.next()
和.find()
找到<div>
相对于<a>
的方法。如果<div>
没有立即跟随您发布的代码中的<a>
,则可能需要进行一些调整,例如,如果中间有元素,但它们仍然是兄弟姐妹,你需要.nextAll('.moreDetails:first')
而不是.next()
。