Question

我设置了一对<div>个元素，这样当点击一个<div>时，另一个会动画到其内容的适当高度。

脚本通过暂时将高度切换为auto，测量它，然后切换回样式表高度（为零）来完成此操作。

它工作正常，但只有jQuery 1.4.4，这是相当古老的。每当我尝试放入需要更新版本的东西时，动画就会停止工作，无论是完全没有动画还是两个元素都消失了。

我在下面制作了一个JSFiddle。这个版本的jQuery甚至没有列在库中，所以我不得不在外部链接它（在左边的External Resources下）。如果你删除它并将库设置为最低可用库，你就会明白我的意思。

以下是代码：

<script type="text/javascript">//<![CDATA[ 
    $(function(){
        var el = $('#ev-donate-form'),
            curHeight = el.height(),
            autoHeight = el.css('height', 'auto').height();
            el.height(curHeight);
        $("#ev-sponsors").toggle(function(){
            el.height(curHeight).animate({height: autoHeight}, 400);
        },function(){
            el.height(autoHeight).animate({height: curHeight}, 400);
        });
    });
//]]>
</script>

有没有办法我可以更新这个以避免冲突？

Answer 1

试试这个：https://jsfiddle.net/27sr4kzv/16/

@RequestMapping(value = "/vehicle", method = RequestMethod.POST)
public ResponseEntity<String> vehicleTest(@RequestBody List<testModel> testModel){

        return new ResponseEntity<String>(HttpStatus.OK);;
}

Answer 2

toggle功能用于显示/隐藏选择器中的所选元素，当您使用$("#clickme").toggle时，您只需显示/隐藏#clickme元素，请在http://api.jquery.com/toggle/

上阅读更多内容您可能想要使用的是.on("click", function () { ...; });（http://api.jquery.com/on/）

以下修订后的JS实现了效果：

$(function(){
  var el = $('#omgivebeenclicked'),
    IsShown = false,
      curHeight = el.height(),
      autoHeight = el.css('height', 'auto').height();
        el.height(curHeight);
  $("#clickme").on("click", function(){
    el.height(IsShown ? autoHeight : curHeight).animate({
        height: IsShown ? curHeight : autoHeight
    }, 400);
    IsShown = !IsShown;
  });
});

演示：https://jsfiddle.net/27sr4kzv/13/

动画到高度：自动使用更新的jQuery

2 个答案: