Question

我试图在点击时创建一个扩展高度的div，然后再次单击时返回其原始大小。我曾尝试使用.toggle，但每当我做每个div（与相关的类）完全消失。我在下面贴了一个代码笔，因此您可以轻松查看代码效果。 http://codepen.io/JoshuaHurlburt/pen/JKqAPr

<div>
  <div class='box' id='emailVer'>
    <h2 id='payText'>PAYMENT</h2>
  </div>

  <div class='box' id='accCust'>
    <h2 id='acText'>ACCOUNT CUSTOMIZATION</h2>
  </div>

    <div class='box' id='pay'>
    <h2 id='evText'>EMAIL VERIFICATION</h2>

  </div>
</div>

JS：

var main = function(){
  $('.box').click(function() {
    $(this).animate({
      height: "300px"
    },200 );
  }
)}
$(document).ready(main);

我决定省略CSS，但如果有人认为它对解决方案很重要，我会编辑它

Answer 1

这可能是比这更好的解决方案，但这里只有一个 -

用此

替换您的脚本文件

var main = function(){
  $('.box').click(function() {
    var el = $(this); 
    if (!el.hasClass('selected')) {
      el.animate({
      "height": "300px"
    }, 200)
      el.addClass("selected");
    } else {
      el.animate({
      "height": "75px"
    }, 200);
      el.removeClass("selected");
    }
  }
)}
$(document).ready(main);

您需要的是一种跟踪已经选择（和动画）的内容以及没有内容的方法。我选择添加一个类（选中）并检查该元素是否具有该类。如果尚未选中，则动画为300px并添加该类，否则动画回到75px并将其删除。

Answer 2

尝试.slideToggle

$( "#clickme" ).click(function() {
  $( "#book" ).slideToggle( "slow", function() {
    // Animation complete.
  });
});

Answer 3

jQuery中的切换功能切换元素的可见性，这就是它们消失的原因。

我相信你要找的是.toggleClass。见http://api.jquery.com/toggleclass/。然后，您可以使用展开的高度属性创建另一个类。这将在点击时打开和关闭。

在框上添加现有过渡属性的高度将处理动画。

CSS

.box {
  width:300px;
  height:75px;
  margin:0 auto;
  -webkit-transition:box-shadow 1s, height 1s;
  transition: box-shadow 1s, height 1s;
}

.expanded {
  height: 300px;
}

JS

var main = function(){
  $('.box').click(function() {
    $(this).toggleClass('expanded');
  }
)};
$(document).ready(main);

点击时无法切换动画

3 个答案: