使用JS实现展开及收缩效果

wanglihu

浏览: 918450 次
性别:
来自: 黑龙江

最近访客更多访客>>

noriri

leimingchao

liunancun

zzy_001

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javaScript技术

工作 HTML

   希望给点评论什么的，也便于本人重新编辑该文章，别拍拍屁股走人啊！哈哈！
   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>国&nbsp;&nbsp;籍：</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> 
      密&nbsp;&nbsp;码： <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>

分享到：

JS中获取session中传过来的值对象 | 使用JS设置文件上传输入框为只读属性

2008-09-08 19:39
浏览 12627
评论(1)
分类:Web前端
查看更多

1 楼 liyufu86 2013-06-08

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

使用JS实现展开及收缩效果

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

使用JS实现展开及收缩效果

评论

发表评论

相关推荐

JQuery zTree插件

JavaScript在IE浏览器和Firefox浏览器中的差异总结

javascript继承方式

javascript中定义对象方式

js原始数据类型、强制类型转换、typeof运算符的使用实例

js中Function对象

js全选与反选、收缩与展开

js验证数字

Cookie对象使用

javascript内置对象

javascript定时器

javascript事件控制

javascript自定义对象

javascript中字符串的使用方法

javascript内置函数

javascript内置的默认对象

javascript对象创建方式

javascript深度解析

html滑动门实现

收集的非常不错的js脚本

最近访客更多访客>>