slideToggle jQuery函数 [英] 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");
                    });
});

有人发现任何问题吗?

推荐答案

从我的评论开始:

嗯，措词只在一个方向上发生了变化，因此它永远不会返回阅读更多内容".除此之外，很高兴看到随附的HTML.

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.

这里有一些可能有效的代码，有待查看HTML.

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;
});

演示: http://jsfiddle.net/yLvms/

代码工作如下.

1. 点击事件绑定到#more元素，当该函数触发时.
2. 触发后，#the_more元素根据其可见性状态上下滑动，切换.
3. slideToggle()完成后会触发回调，以更改文本
4. 使用 .text()#the_more中的文本>函数，它将当前文本值传递给函数以进行更改.
5. 文本函数只是三元-if ，用于检查的当前值#the_more中的文本，如果当前为"Read More"，则变为"Read Less"，反之亦然，这是文本的切换.

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.

希望有帮助.

这篇关于slideToggle jQuery函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！