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

加号不改变

1 个答案:

Fiddle

Fiddle