在扩展 div 旁边停止 div 移动

Question

我遇到了一个问题，当我扩展一个 div 时，它旁边的 div 也会向下移动。我想做的是阻止这种情况发生，但不确定我哪里出错了。

到目前为止我的代码：

    $(document).ready(function(){ 
  $(".projectTitle:nth-of-type(1)").hover(
    function() {
       $(".project").height(500);
    }, function(){
        $(".project").height(350);
    });
    $(".projectTitle:nth-of-type(2)").hover(
    function() {
       $(".project").height(700);
    }, function(){
        $(".project").height(350);
    });
    $(".projectTitle:nth-of-type(3)").hover(
    function() {
       $(".project").height(900);
    }, function(){
        $(".project").height(350);
    });
    $(".projectTitle:nth-of-type(4)").hover(
    function() {
       $(".project").height(500);
    }, function(){
        $(".project").height(350);
    });
});

#model {
    position: relative;
    top: 200px;
    text-align: center;
}

.project {
    position: relative;
    top: 30px;
    font-weight: bold;
    background-color: lightgray; /* Changing background color */
    font-weight: bold; /* Making font bold */
    border-radius: 70px; /* Making border radius */
    font-size: 22px; /* Changing font size */
    height: 350px;
    display:inline-block;
   width: 1830px;
   -webkit-transition:height, 1.5s linear;
    -moz-transition: height, 1.5s linear;
    -ms-transition: height, 1.5s linear;
    -o-transition: height, 1.5s linear;
    transition: height, 1.5s linear;
}

.projectTitle {
    position: relative;
    background-color: #009F4D;
    width: 350px;
    left: 90px;
    bottom: -110px;
    font-size: 25px;
    border-radius: 10px!important;
    padding: 20px 5px 20px 5px;
}

.projectTitle:nth-of-type(2) {
    position: relative;
    left: 520px;
    bottom: 10px;
    font-size: 18px;
    padding: 20px 5px 40px 5px;
}
.projectTitle:nth-of-type(3) {
    position: inherit;
    left: 950px;
    bottom: 130px; 
}
.projectTitle:nth-of-type(4) {
    position: inherit;
    left: 1380px;
    bottom: 250px; 
}

.arrow1 {
    font-size:80px;
    color: #425563;
    position: absolute;
    top: 0;
    left: 355px;
    display: block;
}

.projectTitle:nth-of-type(2) .project {
    height: 500px;
}
.handoverExpanded {
    height:0px;
    -webkit-transition:height, 1.5s linear;
    -moz-transition: height, 1.5s linear;
    -ms-transition: height, 1.5s linear;
    -o-transition: height, 1.5s linear;
    transition: height, 1.5s linear;
    position: inherit;
    background-color: #001489;
    width: 300px;
    border-radius: 10px;
    font-size: 25px;
    left: 20px;
    opacity: 0;
}

.handoverExpanded p {
    font-size: 0px;
}


.projectTitle:hover > .handoverExpanded {
  height: 70px;
  color: white;
  opacity: 1;
}

.projectTitle:hover > .handoverExpanded p{
    font-size: 15px;
}

.ModelHeader {
    padding-left: 50px;
}

<div id = "model">
<div class="project">
    <p class="ModelHeader" style="text-decoration: underline">Project Delivery Model</p>
    <div class = "projectTitle">
        <p>Project Handover</p>
        <div class ="handoverExpanded">
            <p>HSSEQ</p>
        </div>
        <div class ="handoverExpanded">
            <p>Project Management</p>
        </div>
        <span class ="arrow1">&#8594;</span>
    </div>
    <div class = "projectTitle">
        <p>Project Receipt & Phase Initiation</p>
        <div class ="handoverExpanded">
            <p>HSSEQ</p>
        </div>
        <div class ="handoverExpanded">
            <p>Project Management</p>
        </div>
        <div class ="handoverExpanded">
            <p>Engineering</p>
        </div>
        <div class ="handoverExpanded">
            <p>Project Controls</p>
        </div>
        <div class ="stageGate">
            <p>Stage Gate Review</p>
        </div>
        <span class ="arrow1">&#8594;</span>
    </div>
    <div class = "projectTitle">
        <p>Project Execution</p>
        <div class ="handoverExpanded">
            <p>HSSEQ</p>
        </div>
        <div class ="handoverExpanded">
            <p>Project Management</p>
        </div>
        <div class ="handoverExpanded">
            <p>Engineering</p>
        </div>
        <div class ="handoverExpanded">
            <p>Project Controls</p>
        </div>
        <div class ="handoverExpanded">
            <p>Construction</p>
        </div>
        <div class ="handoverExpanded">
            <p>Commissioning</p>
        </div>
        <div class ="stageGate">
            <p>Stage Gate Review</p>
        </div>
        <span class ="arrow1">&#8594;</span>
    </div>
    <div class = "projectTitle">
        <p>Project Close Out</p>
        <div class ="handoverExpanded">
            <p>HSSEQ</p>
        </div>
        <div class ="handoverExpanded">
            <p>Project Management</p>
        </div>
    </div>
    </div>
    </div>

还有一个 jsfiddle：http://jsfiddle.net/2wdnLujv/3/

我曾考虑过将位置设为绝对，但当 div 展开时我的动画不再起作用。那么有没有一种方法可以阻止扩展 div 旁边的 div 也向下移动？

Answer 1

正如我所见，灰色容器的子项在容器中确实持有 RELATIVE 位置。这些位置随着父容器高度的变化而变化

解决方案

1. 您可以使父级具有最大可能的高度以容纳子级（如果子级处于最小化状态，则不那么直观）
2. 您可以为可展开项目的标题设置一个轴，带有一个倾斜点，当另一个正在展开时，它们都不会移动....（我会这样做）

我想要的那个，需要对你的代码进行很好的重构，你可以让父母（标题）有一个灵活的父容器，然后溢出相对于标题是绝对的，这样每个标题都包含它的孩子在它下面..