javascript - プラス記号が元に戻らない

Question

次のような単純なトグル スクリプトがあります: http://jsfiddle.net/M4pZc/

ページが最初に表示されるときは+が表示され、切り替えると に変わります-。しかし、もう一度クリックしても元に戻りません+

なぜこれが機能しないのですか？私が行っているのは、要素が表示されている場合の if/else だけです。そのため、#hidden div が表示されていない場合は、+ に戻す必要があります。

Jクエリは次のとおりです。

$(function(){
   $("#showMore").click(function(){
      $("#hiddenMore").slideToggle(200);
      $("#hiddenMore").is(":visible") ? $("#showMore").text("More -") : $("#showMore").text("More +");
   });
});

Answer 1

アニメーションの完了後に要素の表示チェックが実行されるとは限らないため、slideToggle のコールバックの下に配置する必要があります。

 $("#showMore").click(function(){
      $("#hiddenMore").slideToggle(200, function(){
         $(this).is(":visible") ? $("#showMore").text("More -") : $("#showMore").text("More +");
      });

   });

フィドル

テキストの関数コールバックを使用して、アニメーションの完了時にテキストを交換することもできます。

$(function () {
    $("#showMore").click(function () {
        var $this = $(this);
        $("#hiddenMore").slideToggle(200, function(){
            $this.text(function (_, text) {
               return text == "More -" ? "More +" : "More -";
            });
        });
    });
});

フィドル