javascript - JQuery - 如何切换扩展/收缩宽度？

Question

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

fiddle 链接:https://jsfiddle.net/fpw9apmc/

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

Answer 1

这是针对您的问题和 Working 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'
                }
            });
            }

        });