slideToggle jQuery function

问题

i'm trying to display a paragraph of text and then underneath is a "read more" link, when i click the link, more text is supposed to slide down and the text of the link is supposed to read "Read Less", then when they click that, the text is supposed to slide back up and the link text to be "Read More" again..

$('#more').click(function() {
                $('#the_more').slideToggle("slow", function () {
                      $('#more').html("Read Less");
                    });
});

Anyone spot any problems?

回答1:

From my comment:

Well the wording gets changed in one direction only, so it'll never return to "Read More". Other than that, it would be nice to see the HTML that accompanies this.

Here is some code that might work, pending seeing the HTML.

$('#more').click(function() {
    $('#the_more').slideToggle("slow", function () {
        $('#more').text(function (index, text) {
            return (text == 'Read More' ? 'Read Less' : 'Read More');
        });
    });

    return false;
});

Demo: http://jsfiddle.net/yLvms/

The code works as follows.

1. A click event is bound to the #more element, when clicked the function fires.
2. When fired, #the_more element is slid up or down, toggled, depending on it's visibility state.
3. A callback is fired after the slideToggle() is finished that changes the text
4. The text within #the_more is changed using the functional variant of the .text() function, this passes the current text value to the function for changing.
5. The text function is simply a ternary-if that checks the current value of the text within #the_more and if it is currently 'Read More' it becomes 'Read Less' and vice versa, a toggle of the text.

Hope that helps.

来源：https://stackoverflow.com/questions/4293260/slidetoggle-jquery-function