2
4

4 に答える 4

5

に設定しているだけですless..。また、それを評価してmore...、現在の値が の場合はに戻す必要がありless...ます。

デモを見る: HTML の比較 

$(document).ready(function() {
    $(".overview-continued").hide();
    $(".show-overview").html("more...");
    $(".show-overview").click(function() {
        var text = $(this).html();
        $(".overview-continued").slideToggle("1000");
        $(".show-overview").html(text == "less..." ? "more..." : "less...");
        return false;
    });
});​


freakishHTMLを比較することは悪い習慣であるというコメントで言及された編集。
(また、OP で指定されたテキストとタグを使用するようにサンプルを更新しました)

そのためには、別のDEMO: Using Attributes を参照してください。

はanchor新しいカスタム属性を受け取りました:

<a class="show-overview" data-item-state="showLess">...</a>​

スクリプトが更新され、少しリファクタリングされています。 

$(document).ready(function() {
    $(".overview-continued").hide();

    setState();

    $(".show-overview").click(function() {
        $(".overview-continued").slideToggle("1000");
        setState();
        return false;
    });

    function setState() {
        var control = $(".show-overview");
        var state = control.attr("data-item-state");

        control.html(state == "showLess" ? "more..." : "less...");
        control.attr("data-item-state", state == "showLess" ? "showMore" : "showLess");
    };
});​
于 2012-06-12T22:04:58.160 に答える
2

.show-overview を常に「less...」に設定しているため、クリック関数に条件を付ける必要があります。

正しい構文ではないかもしれませんが:

$(".show-overview").click(function()

    {
        $(".overview-continued").slideToggle("1000");
        if($(".show-overview").html() == "less...")
        {
        $(".show-overview").html("more...");
        }
        else
        {
        $(".show-overview").html("less...");
        }
        return false;

    });
于 2012-06-12T22:05:13.767 に答える
2

divJavaScript の観点から、 がいつ開閉されるかを知る必要があります。これを試して：

$(document).ready(function() {
    var overview = $(".overview-continued");
    overview.hide();
    var show = $(".show-overview");
    show.html("more...");
    show.click(function(e) {
        e.preventDefault();
        var is_opened = overview.data('is_opened');
        if (!is_opened) {
            overview.slideDown(500, function() {
                show.html("less...");
            });
        } else {
            overview.slideUp(500, function() {
                show.html("more...");
            });
        }
        overview.data('is_opened', !is_opened);
    });
});

このjsFiddleコードを確認してください。コードを少しリファクタリングしたことに注意してください。

于 2012-06-12T22:05:44.013 に答える
0

クリック機能で「.less」というラベルを付けるように指示しています。2つの方法に分割すると、理解しやすくなります...これらの行に沿った何か：

$(document).ready(function() {
    function close(){  
      $(".overview-continued").slideToggle("1000");
      $(".show-overview").html("more...");
    }
    function open(){  
      $(".overview-continued").slideToggle("1000");
      $(".show-overview").html("less...");
    }
    $(".overview-continued").hide();
    $(".show-overview").toggle(open,close);
});​

編集：コメントのため

于 2012-06-12T22:09:00.473 に答える