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

   });

小提琴

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

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

小提琴