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/

左側のオプションで「Migrate 1.1.0」がチェックされていることがフィドルでわかります。これは、.toggle()この (最新の) バージョンの jQuery でこの方法で機能させる唯一の方法です。

.toggle()私の質問は、 Migrateを使用せずに同じ機能を実行する別の方法を考えてもらえますか?

この質問が他の場所で回答されていると思われる場合は申し訳ありませんが、決定的なアプローチを実際に目にすることなく、回避策が「比較的簡単」であるというヒントを見つけ続けています。残念ながら、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);
    });
}

トグルを使用するのと同じように使用します。

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

デモンストレーション

于 2013-02-26T09:33:43.090 に答える