javascript - 将输入字段堆叠在一起

Question

我有两个输入字段(一个文本框和一个选择框)，我想将它们堆叠在一起。在我的 js 中，我将检查某物的值并将元素样式设置为隐藏。当我使用以下代码时，选择和文本框都完全可见(这是在我将一个标记为隐藏之前)。有没有我可以设置的 CSS 属性，使它们直接位于彼此之上，这样当一个被隐藏时，似乎只有一个在那里。感谢您的帮助。

<div>
   <div id="agencyAccountDropDownDiv">
     <select id="AgencyAccountSelect">
     </select>
    </div>
    <div id="agencyAccountInputDiv">
     <input id="Text1" type="text" />
    </div>
</div>

Answer 1

您正在寻找的是堆叠技术。

1) 使容器 div 相对定位:#agencyAccountDropDownDiv{position:relative;}

这是为了使包含的 div 绝对根据其容器保持定位。

2) 接下来为包含 div 的输入提供绝对位置:

#agencyAccountDropDownDiv，#agencyAccountInputDiv{position:absolute;}

上面的意思是浏览器会像一堆卡片一样堆叠 div。

3) 使用 javascript 隐藏和显示您想要的 div。

var div1 = document.getElementById('agencyAccountDropDownDiv');
var div2 = document.getElementById('agencyAccountInputDiv');
div1.style.display = ' block ';
div2.style.display = 'none';

或者如 g.d.d.c 所述，使用 jquery:

$("#agencyAccountDropDownDiv").show();
$("#agencyAccountInputDiv").hide();