どうすれば途中で開始できるのか疑問に思っていました.Jqueryによって追加のdivが追加されると、コンテナは途中を開始点として保持します。したがって、最初の div は絶対配置された div の中央から始まり、2 番目の div が入ると、両方の div が中央を開始点として保持します。
だから私が持っているのはこれです:
<div class="zoeken-absolute">
<div class="zoeken">
<form>
<div class="zoeken-select">
<div id="cat1" class="zoeken-value">Selecteer je school/opleiding</div>
<div class="zoeken-handle"></div>
<select class="gui-validate" id="school">
<option>Selecteer je school/opleiding</option>
<option value="656462">menu</option>
<option value="653688">HBO Spaans</option>
</select>
</div>
/////// This div below becomes visible when something is selected above ////////
<div class="zoeken-select course">
<div id="cat2" class="zoeken-value">Selecteer je sector/locatie</div>
<div class="zoeken-handle"></div>
<select class="gui-validate" id="course">
</select>
</div>
//////////////////////////////////////////////////////////////////////////////////
</form>
</div>
</div>
私のCSS:
#index .zoeken-absolute {
background: url("zoekenbg.png?") no-repeat scroll center top rgba(0, 0, 0, 0);
height: 220px;
left: 500px;
top: 75px;
width: 400px;
z-index: 999;
position:absolute;
}
.zoeken-select {
background: url("newsbg.png?") repeat-x scroll 0 0 #FFFFFF;
border: 1px solid #D7D7D7;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 0 #FAD689;
color: #000000;
font-size: 13px;
height: 26px;
line-height: 26px;
margin: 9px 0 0 10px;
position: relative;
width: 238px;
}
.zoeken-select .zoeken-value {
height: 26px;
left: 9px;
overflow: hidden;
position: absolute;
right: 25px;
text-shadow: 0 1px #FFFFFF;
white-space: nowrap;
}
.zoeken-select .zoeken-handle {
background: url("zoekdd.png") no-repeat scroll -3px 0 rgba(0, 0, 0, 0);
border-left: 1px solid #8D8D8D;
height: 26px;
position: absolute;
right: 0;
width: 25px;
}
.zoeken-select select {
cursor: pointer;
height: 100%;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}
#index .zoeken > form {
margin-top:20px;
}