jQuery动画div以增加点击高度，并在第二次点击时折叠

Question

我试图做一个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

谢谢您的帮助！

Answer 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;
}