jQuery切换和更改文本

时间:2013-03-28 10:09:34

标签: jquery slidetoggle

的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时如何实现

1 个答案:

答案 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.
});