jQuery-如何切换扩展/缩小宽度？

Question

到目前为止，我有一个单击功能可扩展宽度，但不确定如何切换将其收缩回其原始宽度。 缩小后，.button应该再次阅读“显示详细信息”。

小提琴链接： https : //jsfiddle.net/fpw9apmc/

$('.button').click(function() {
        $(".button").text("Hide Details");
        $(".expand").animate({
        width: "60%"
        }, {
            duration: 200,
            specialEasing: {
                width: 'linear'
            }
        });
    });

Answer 1

这是针对您的问题和正在运行的Jsfiddle的经过修改的代码-

$('.button').click(function() {
            var btnText =  $(this).text();
            if(btnText === "Hide Details"){
            $(this).text("Show Details");
            $(".expand").animate({
            width: 0
            }, {
                duration: 200,
                specialEasing: {
                    width: 'linear'
                }
            });
            }else{
                $(this).text("Hide Details");
            $(".expand").animate({
            width: "60%"
            }, {
                duration: 200,
                specialEasing: {
                    width: 'linear'
                }
            });
            }

        });

Answer 2

下面的脚本将为您提供帮助。

var clicked = false;
var previoswidth = 0;
$('.button').click(function () {
    $(".button").text("Hide Details");
    clicked = !clicked;
    if (clicked) {
        previoswidth = $(".expand").width();
        $(".expand").animate({
            width: "60%"
        }, {
            duration: 200,
            specialEasing: {
                width: 'linear'
            }
        });
    }
    else {
        $(".expand").animate({
            width: previoswidth
        }, {
            duration: 200,
            specialEasing: {
                width: 'linear'
            }
        });
    }
});

Answer 3

在这里

将切换功能分别应用于文本和宽度。 这应该够了吧

var width = $(".expand").width();
$('.button').click(function() {
  $(this).text(function(i, text) {
    return text === "Show Details" ? "Hide Details" : "Show Details";
  })
  var toggleWidth = $(".expand").width() == 0 ? "60%" : "0";
  $(".expand").animate({
    width: toggleWidth
  }, {
    duration: 200,
    specialEasing: {
      width: 'linear'
    }
  });
});

Answer 4

您可以使用CSS转换来完成此操作，并使用jQuery切换类。

更新您的小提琴与此： https : //jsfiddle.net/oykwmj9c/2/

jQuery的：

$('.button').click(function() {
    if ($(".button").text() == "Show Details") {
    $(".button").text("Hide Details");
  } else {
    $(".button").text("Show Details");
  }  
  $(".expand").toggleClass("expanded");
});

CSS：

.expand {
  background-color: red;
  width: 0;
  transition: width 1s ease-in-out;
}

.expanded {
  width: 60%
}

.button {
  color: #000;
  font-size: 2em;
}

HTML：

<div class="expand">
  <a class="button" href="#">Show Details</a>
</div>