javascript - 加号不会变回来

Question

我有一个简单的切换脚本，如下所示:http://jsfiddle.net/M4pZc/

当页面最初显示时，会显示 +，切换时会更改为 -。但再次单击时，不会变回 +

为什么这不起作用？我所做的只是 if/else(如果元素可见)，因此当 #hidden div 不可见时，它应该改回 +。

这是 Jquery:

$(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 +");
      });

   });

Fiddle

您也可以尝试这种方式，使用文本的函数回调在动画完成时交换文本:

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

Fiddle