使用JS实现展开及收缩效果-优快云博客

本文介绍了一种在HTML中利用iframe元素来遮挡select下拉框的方法，解决了div无法覆盖select的问题，并提供了一个实际应用的例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

希望给点评论什么的，也便于本人重新编辑该文章，别拍拍屁股走人啊！哈哈！
HTML网页中div如何挡住select，有好多需求中提出这样的问题。再三研究并寻找解决方法，最后从网上搜索到这样的信息：说是可以用iframe做底，挡住select，也就达到了div挡住select的效果。
于是本人喜出望外，急于完成工作任务，查了不少资料，也调试了很长时间，最后还真好用了。
这两天空闲时间就将自己实现该功能的代码贴出来供大家参考，以便更快捷的找到问题的突破口。下面就是实现用户信息录入页面时的源代码：

<html> 
<head>
<title>用户信息录入页面</title>
<script type="text/javascript">
function setContent(flag) { 
  var content1 = document.getElementById('menu'); 
  var content2 = document.getElementById('back'); 
  if (flag){ 
     content1.style.display = "block"; 
     content2.style.display = "block"; 
     content2.style.width = content1.offsetWidth; 
     content2.style.height = content1.offsetHeight; 
     content2.style.top = content1.style.top; 
     content2.style.left = content1.style.left; 
     content2.style.zIndex = content1.style.zIndex - 1; 

   } 
  else { 
     content1.style.display = "none"; 
     content2.style.display = "none"; 
   } 

}


</script>
</head>
<body>
<legend ACCESSKEY=C>请认真填写您的用户信息及资料:<a  href="#" onclick="setContent(true)">展开</a> 
<a  href="#" onclick="setContent(false)">收起</a> </legend> 
<div style="z-index:3;text-align:left"> 
<legend ACCESSKEY=A>国  籍：</legend>
<Select name="city"> 
   <option value="1">请选择国籍</option> 
   <option value="2">中国</option> 
   <option value="3">美国</option> 
   <option value="4">俄罗斯</option> 
   <option value="5">日本</option> 
   <option value="6">朝鲜</option> 
   <option value="7">韩国</option> 
   <option value="7">新加坡</option> 
   <option value="7">加拿大</option> 
   <option value="7">澳大利亚</option> 
   <option value="7">法国</option> 
</Select> 
</div> 
<fieldset id="menu" style="z-index:999;width:500;overflow-x:auto;height:100;overflow-y:auto;position:absolute;display:none;border:1px dotted #6699FF;background:#E5F0FF"> 
  <P> 
    <label ACCESSKEY=E> 
      <input type=radio name="zjlx" value="152628198307095678">身份证 
    </label> 
    <label ACCESSKEY=F> 
      <input type=radio name="zjlx" value="152628198307095678">出国护照<br> 
    </label> 
    <label ACCESSKEY=H> 
      用户名： <input type=text name="userName"> <br> 
    </label> 
    <label ACCESSKEY=M> 
      密  码： <input type=text name="userName"> <br> 
    </label> 
	<label ACCESSKEY=N> 
      E_mail： <input type=text name="userName"> <br> 
    </label> 
  </P> 
</fieldset> 
<iframe id="back" src="" scrolling="no" frameborder="0" style="position:absolute;top:0px;left:0px;display:none"> 
</iframe>
</body>
</html>