4

由于已从 jQuery.toggle()中弃用，我正在寻找一种新的简单解决方案，该解决方案将使我能够创建一个“阅​​读更多”按钮，该按钮可以向下滑动段落，同时将按钮文本更改为“少读”。

我已经把这个工作代码放在一起：

var moreText = "Read more";
var lessText = "Read less";

$(document).ready(function () {
    $("a.readmorebtn").text(moreText);
    $("a.readmorebtn").toggle(function () {
        $("a.readmorebtn").text(lessText);
        $("p.more").slideToggle(0);
    },

    function () {
        $("a.readmorebtn").text(moreText);
        $("p.more").slideToggle(0);
    });
});

http://jsfiddle.net/approach/gDvyR/

您将在小提琴中看到左侧选项中选中了“迁移 1.1.0”，这是.toggle()使用此（最新）版本的 jQuery 以这种方式进行工作的唯一方法。

我的问题是，你能想到另一种执行相同功能但不使用.toggle()和迁移的方法吗？

如果您觉得这个问题已在其他地方得到解答，我深表歉意，但我一直在寻找“相对简单”的解决方法的提示，而没有真正看到任何确定的方法。不幸的是，作为 jQuery 的新手，它对我来说似乎并不那么简单！

非常感谢。

4

2 回答 2

5

我个人认为这里的所有答案都过于详尽，无法满足您的需求。这应该可以很好地解决问题，并且它适用于多次出现。http://jsfiddle.net/BramVanroy/gDvyR/5/

var moreText = "Read more",
    lessText = "Read less",
    moreButton = $("a.readmorebtn");

moreButton.click(function () {
    var $this = $(this);
    $this.text($this.text() == moreText ? lessText : moreText);
    $this.next("p.more").slideToggle("fast");
});
于 2013-02-26T09:41:04.150 回答
1

这是一个通用的替换：

$.fn.toggleFuncs = function() {
    var functions = Array.prototype.slice.call(arguments),
    _this = this.click(function(){
        var i = _this.data('func_count') || 0;
        functions[i%functions.length]();
        _this.data('func_count', i+1);
    });
}

您可以像使用 toggle 一样使用它：

$('something').toggleFuncs(f1, f2, f3);

示范

于 2013-02-26T09:33:43.090 回答