28,409
社区成员
发帖
与我相关
我的任务
分享关于使用style.display时下拉框错位问题
问：怎么解决显示/隐藏中出现的下拉框错位问题？
测试页：
<html>
<head>
<script>
function ShowInfo(div){
if(div==null||typeof(div)=='undefined')
return
div.style.display=div.style.display=='none'?'block':'none'
}
</script>
</head>
<body>
<form>
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p><a href="javascript:ShowInfo(divInfo)">click me</a>
<p><div id=divInfo>
<p>line
<p>line
<p>line
<p>line
<p><input type=text value="hold"><select><option>move<option><select>
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
</div>
</form>
</body>
</html>
操作：展开时窗口右边出现滚动条，下拉滚动条；点击隐藏，同时滚动条消失；再点击展开，Select错位；改变窗口大小，Select复原。
测试页：
<html>
<head>
<script>
function ShowInfo(div){
if(div==null||typeof(div)=='undefined')
return
div.style.display=div.style.display=='none'?'block':'none'
}
</script>
</head>
<body>
<form>
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p><a href="javascript:ShowInfo(divInfo)">click me</a>
<p><div id=divInfo>
<p>line
<p>line
<p>line
<p>line
<p><input type=text value="hold"><select><option>move<option><select>
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
</div>
</form>
</body>
</html>
操作：展开时窗口右边出现滚动条，下拉滚动条；点击隐藏，同时滚动条消失；再点击展开，Select错位；改变窗口大小，Select复原。
...全文
请发表友善的回复…
发表回复
二师兄的老公 2005-05-10
- 打赏
- 举报
嗯，用看来scrollBy最好。
if(div.style.display=='block')
{
window.scrollBy(0,1)
window.scrollBy(0,-1)
}
if(div.style.display=='block')
{
window.scrollBy(0,1)
window.scrollBy(0,-1)
}
二师兄的老公 2005-05-10
- 打赏
- 举报
不过好像最大化窗口就不能偷懒了，用表格倒也可以，但是固定位置(style.top/left)的又怎么办呢？
二师兄的老公 2005-05-10
- 打赏
- 举报
谢谢楼上好主意！
也可以用resizeBy来偷懒，如：
function ShowInfo(div){
if(div==null||typeof(div)=='undefined')
return
div.style.display=div.style.display=='none'?'block':'none'
if(div.style.display=='block')
{
window.resizeBy(1,0)
window.resizeBy(-1,0)
}
}
：）
也可以用resizeBy来偷懒，如：
function ShowInfo(div){
if(div==null||typeof(div)=='undefined')
return
div.style.display=div.style.display=='none'?'block':'none'
if(div.style.display=='block')
{
window.resizeBy(1,0)
window.resizeBy(-1,0)
}
}
：）
newrockyluojun 2005-05-10
- 打赏
- 举报
用Table固定位置
<html>
<head>
<script>
function ShowInfo(div){
if(div==null||typeof(div)=='undefined')
return
div.style.display=div.style.display=='none'?'block':'none'
}
</script>
</head>
<body>
<form>
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p><a href="javascript:ShowInfo(divInfo)">click me</a>
<p><div id=divInfo>
<p>line
<p>line
<p>line
<p>line
<p><TABLE>
<TR>
<TD><input type=text value="hold"></TD><TD><select><option>move<option><select></TD>
</TR>
</TABLE>
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
</div>
</form>
</body>
</html>
<html>
<head>
<script>
function ShowInfo(div){
if(div==null||typeof(div)=='undefined')
return
div.style.display=div.style.display=='none'?'block':'none'
}
</script>
</head>
<body>
<form>
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p><a href="javascript:ShowInfo(divInfo)">click me</a>
<p><div id=divInfo>
<p>line
<p>line
<p>line
<p>line
<p><TABLE>
<TR>
<TD><input type=text value="hold"></TD><TD><select><option>move<option><select></TD>
</TR>
</TABLE>
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
<p>line
</div>
</form>
</body>
</html>
