Question

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

$('.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'
                }
            });
            }

        });

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

FIDDLE HERE

将切换功能分别应用于文本和宽度。那应该是诀窍

var mywindow = window.open('','Print','height=800,width=900');
var simg = new mywindow.Image();
mywindow.document.body.appendChild(simg);

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>

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

4 个答案: