更改元素显示时文本从div中移出

瓦西里123

我正在做一个项目，如果我要单程飞行或带回程的飞行，则必须勾选一个复选框。如果在方框中打勾，我只想进行一次飞行，所以我只能输入一个输入日期。如果我取消选中我的方框，则希望返回航班，则出现第二个输入以填写返回日期。当我加载我的应用程序时，该框未选中，因此我有两个输入。可用的路线在我的输入旁边，如下所示：

如果我勾选上方的单程航班复选框，则返程日期消失，当我的出发路线的位置发生变化时，显示如下：

知道我是否取消勾选复选框：

返回路线中元素的位置发生了变化，因为现在我的返回词不在中心，目的地在红色元素之外一半。为什么会发生这种情况，而我不能拥有与第一张照片相同的状态？谢谢您的帮助。

我的代码显示可用路线：

function showDate(){
            var checkbox = document.getElementById("transition");
            var backDate = document.getElementById("return-box");
            if(checkbox.checked==true){
                backDate.style.display="none";
                document.getElementById("ret").style.display="none";
                document.getElementById("return-container").style.display="none";
                document.getElementById("available-routes").style.top="300px";
            }else if (checkbox.checked==false){
                backDate.style.display="inline-block";
                document.getElementById("ret").style.display="inline-block";
                document.getElementById("return-container").style.display="inline-block";
                document.getElementById("available-routes").style.top="200px";

            }
        }

.date{
  padding:20px;
}



#routes-container{
  position: relative;
  width:200px;
  height: auto;
}



#routes-container p{
  text-align:center;
}

#departure-container , #return-container{
  position: relative;
  width:200px;
  height: auto;
  background-color: coral;
  display: flex;
  justify-content: space-between;
  flex-flow:row wrap;
  padding:2px;
  border-radius:5px;
}


.dashline{
  position:relative;
  top:-3px;
}

.dep-time , .arr-time{
  font-size: 20px;
}

.location-container{
  display: flex;
  flex-flow:row;
  justify-content: space-around;
  margin-left:3px;
  width:200px;
}

.location-container div{
  font-size:12px;
}

.dest{
  margin-left:auto;
}

.plane{
  margin-left:60px;
  padding-bottom:3px;
}

.d2{
  top:-3px;
}

.ret{
  text-align:center;
}

<div id = "check-t">
                    <label for="transition"> <span id = "simple"> <strong> Simple transition ? </strong> </span> </label>
                    <input type="checkbox" id="transition" name="transition-box" onchange="showDate()" >
                </div>


<div class="date" id="booked-dates">
                    <div id="departure-box">
                        <h3> Departure Date  </h3>
                        <input type = "date" name="dep-date" class = "booking-date" id="anaxorisi">
                    </div>
                    <div id="return-box">      
                        <h3> Return Date </h3>
                        <input type= "date" name= "return-date" class="booking-date" id="epistrofi"> 
                    </div>      
                </div>


<div class="date" id="available-routes">
  <h3> Available Routes </h3>
  <div id="routes-container">
    <p> Departure </p>
    <div id="departure-container">
      <span class="dep-time"> 13:00 </span>
      <span class="dashline">................ </span>
      <span class="arr-time"> 14:00 </span>
      <div class="location-container">
        <div> ATH </div>
        <div class="plane"> ✈️ </div>
        <div class="dest">
          KOS </div>
      </div>
    </div>
    <br/>
    <p id="ret"> Return </p>
    <div id="return-container">
      <span class="dep-time"> 16:00 </span>
      <span class="dashline d2">................ </span>
      <span class="arr-time"> 17:00 </span>
      <div class="location-container">
        <div>
          KOS</div>
        <div class="plane"> ✈️ </div>
        <div class="dest dest2"> ATH </div>
      </div>
    </div>
  </div>

即使在不是我完整应用程序的上述代码段中，返回路线元素中元素的位置也会发生变化

本命

尝试将javascript更改为：

 function showDate(){
        var checkbox = document.getElementById("transition");
        var backDate = document.getElementById("return-box");
        if(checkbox.checked==true){
            backDate.style.display="none";
            document.getElementById("ret").style.display="none";
            document.getElementById("return-container").style.display="none";
            document.getElementById("available-routes").style.top="300px";
        }else if (checkbox.checked==false){
            backDate.style.display="block";
            document.getElementById("ret").style.display="block";
            document.getElementById("return-container").style.display="flex";
            document.getElementById("available-routes").style.top="200px";

        }
    }

这样可以解决问题吗？

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。