Jquery动画div以增加点击时的高度并在第二次点击时折叠答案

【问题标题】：Jquery animate div to increase height on click and collapse on second clickJquery动画div以增加点击时的高度并在第二次点击时折叠
【发布时间】：2015-12-30 03:02:52
【问题描述】：

我正在尝试制作一个 div，当点击它时会增加它的高度，然后当你点击关闭按钮时，它会回到原来的高度。

我设法制作了一个 jquery 脚本，该脚本在点击时会增加高度，在第二次点击时会降低，但由于某种原因它搞砸了布局，如图所示：

它像这样开始，在第二次点击时应该像这样结束：

这里是html：

<div class="work">
    <h1 class="heading">Selected Projects</h1>
    <div class="line"></div>
        <ul>
            <li id="darl">
                <div class="container2"><div class="block">
                    <img class="bg-image"  id="bgimg1" src="Images/perspective2final2pfolio2.jpg">
                </div></div>
                <p>1. Darlington Terrace<i id="close1" class="fa fa-times-circle-o"></i></p>
            </li>

            <li><div class="thinline"></div></li>
            <li id="chil">
                <div class="container2"><div class="block">
                    <img class="bg-image"  id="bgimg2" src="Images/DSC_0756.jpg">
                </div></div>
                <p>2. Children's Playground</p>
            </li>

            <li><div class="thinline"></div></li>
            <li id="lawn">
                <div class="container2"><div class="block">
                    <img class="bg-image"  id="bgimg3"src="Images/perspective2final2pfolio2.jpg">
                </div></div>
                <p>3. Lawn Bowl Bakery Bridge</p>
            </li>

            <li><div class="thinline"></div></li>
            <li id="aque">
                <div class="container2"><div class="block">
                    <img class="bg-image"  id="bgimg4"src="Images/perspective2final2pfolio2.jpg">
                </div></div>
                <p>4. Aqueduct: Museum of Architecture</p>
            </li>

            <li><div class="thinline"></div></li>
            <li id="velo">
                <div class="container2"><div class="block">
                    <img class="bg-image"  id="bgimg5"src="Images/perspective2final2pfolio2.jpg">
                </div></div>
                <p>5. Velocity Frequent Flyer Website</p>
            </li>

            <li><div class="thinline"></div></li>
        </ul>

    </div>

这里是jquery（忽略mouseenter部分和溢出，对于脚本中的另一个函数，而printF（）是将高度打印到控制台中）：

$("#darl").on("click", function(){
    if($("#darl").height() == 38){

        $(this).finish().animate({
            height: "300px",
        }, 500);
        $("#darl .block").css("overflow", "visible");
        $(this).off('mouseenter');
    }else{
        $(this).finish().animate({
           height: "38px",
        }, 500);  
    }
printF();
        });

这里是 github 上的完整代码文件： https://github.com/mingweichan/CVwebsite

感谢您的帮助！

【问题讨论】：

您面临的问题是什么，您想要的结果是什么？

标签： javascript jquery html css

【解决方案1】：

检查硬编码的高度并不是一个好主意。
使用 CSS 更方便。

只需为“可扩展”项目声明一个类，并为其状态声明一个类。然后，使用 jQuery 切换这些类。 CSS 过渡将帮助您实现动画。

$("#darl").click(function() {
  $(this).toggleClass('expanded');
});

#darl {
  height: 38px;
  background-color: grey;
  
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  
  overflow: hidden;
}

#darl.expanded {
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li id="darl">
  <div class="container2">
    <div class="block">
      <img class="bg-image" id="bgimg1" src="Images/perspective2final2pfolio2.jpg">
    </div>
  </div>
  <p>1. Darlington Terrace<i id="close1" class="fa fa-times-circle-o"></i>
  </p>
</li>

现在，您还可以使用 CSS 规则更改 overflow：

#darl .block {
  overflow: hidden;
}

#darl.expanded .block {
  overflow: visible;
}

【讨论】：