的jQuery
$('#message div').hide();
$('.readmore').click(function(e){
e.preventDefault();
$('#message div').slideToggle();
});
HTML
<div id="message">
<p class="intro">This is an introduction.</p>
<div>
<p>This is the first paragraph thats orginally hidden</p>
<p>This is the second paragraph</p>
</div>
<a href="#" class="readmore">Read More</a>
</div><!--message-->
当点击了更多阅读按钮时,内容是slideToggled并向所有人显示并再次点击它隐藏只显示我的.intro但我想在Read More和Show Less之间切换Read More文本。
使用slideToggle时如何实现
答案 0 :(得分:10)
检查其click事件中当前元素的文本并使用条件,如果是,则查看是否必须更改文本,再次使用text()
进行更改;)。
试试这个:
$('.readmore').click(function(e){
e.preventDefault();
$('#message div').slideToggle();
$(this).text( $(this).text() == 'Read More' ? "Show Less" : "Read More"); // using ternary operator.
});