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

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

1 个答案: