如何显示和隐藏层，谢谢各位？

daqi2010 2009-12-26 10:02:36
有一层 DIV ID=MYCRM
有一按钮： ID=myinfo
要实现：
当点击按钮，层显示，并且可以操作层里面的相关链接。当鼠标移开层后，层自动隐藏。
谢谢各位了
...全文
100 15 打赏 收藏 举报
写回复
15 条回复
切换为时间正序
当前发帖距今超过3年，不再开放新的回复
发表回复
dandande 2009-12-26
  • 打赏
  • 举报
 回复
<div id=div style="width:200;height:100;background:gray;visibility:hidden" onmouseout={this.style.visibility="hidden"}>
<a href="" onmouseover={div.style.visibility=""}>111</a><br>
<a href="" onmouseover={div.style.visibility=""}>222</a></div>
<input type=submit value="ok" onclick={div.style.visibility=""}>
licip 2009-12-26
  • 打赏
  • 举报
 回复
getElementById('div').style.display='hidden' //隐藏
这个写错了。应该是：
getElementById('div').style.display='none' //隐藏
xmliy 2009-12-26
  • 打赏
  • 举报
 回复 


<div id="MYCRM" style="width: 300px; height: 200px; background-color:#E6E6E6; display:none">

    

    <a href='http://www.baidu.com'>Baidu</a>

    <button type="button">测试</button>

</div>

<input type="button" id="myinfo" value="ShowInfo" />






(function() {

        var btn = document.getElementById('myinfo');

        var div = document.getElementById('MYCRM');

        btn.onclick = function() {

            div.style.display = '';

            div.onmouseout = function(e) {

                e = e || window.event;

                var target = e.srcElement ? e.srcElement : e.target,

                    related = e.toElement ? e.toElement : e.relatedTarget;

                if (!div.contains(related)) div.style.display = 'none';

            }

        }

    })();
街头小贩 2009-12-26
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 daqi2010 的回复:]
(学而不思则罔) 的代码刚才试过了。可以，就是感觉代码有点多，
t6new.cn) 刚才试过了。如果我在DIV里面加入一些按钮什么的，就不行了。
感谢大家
[/Quote]
忽视了事件!代码多的情况可以用框架！
daqi2010 2009-12-26
  • 打赏
  • 举报
 回复
(学而不思则罔) 的代码刚才试过了。可以，就是感觉代码有点多，
t6new.cn) 刚才试过了。如果我在DIV里面加入一些按钮什么的，就不行了。
感谢大家
Click_Me 2009-12-26
  • 打赏
  • 举报
 回复 


<div id="MYCRM" style="width: 300px; height: 200px; background-color:#E6E6E6; display:none">

	<a href='http://www.baidu.com'>Baidu</a>

</div>

<input type="button" id="myinfo" value="ShowInfo" />

<script type="text/javascript">

(function(){

	var contains = function(a, b) {

		return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPositon(b) & 16);

	}

	function Event(e){ 

		var oEvent = document.all ? window.event : e; 

		if (document.all) { 

			if(oEvent.type == "mouseout") { 

				oEvent.relatedTarget = oEvent.toElement; 

			}else if(oEvent.type == "mouseover") { 

				oEvent.relatedTarget = oEvent.fromElement; 

			} 

		} 

		return oEvent; 

	} 

	var btn = document.getElementById('myinfo');

	var div = document.getElementById('MYCRM');

	btn.onclick = function(){

		div.onmouseout = function(event){

			var target = Event(event).relatedTarget;

			if(!contains(this, target)){

				this.style.display = 'none';

				this.onmouseout = null;

			}else {

				target.onmouseout = function(event) {

					event  = event || window.event;

					if(event.stopPropagation) {

						event.stopPropagation();

					}else {

						event.cancelBubble = true;

					}

				}

			}

		}

		div.style.display = 'block';

	}



})();

</script>
街头小贩 2009-12-26
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 click_me 的回复:]
楼上的两位 误解楼主了.. 你们没注意 主要的问题是.. 鼠标移开DIV隐藏 但可以点击链接这个方面
这才是主要 呵呵
[/Quote]
VS
[Quote=引用楼主 daqi2010 的回复:]
当点击按钮，层显示，并且可以操作层里面的相关链接。当鼠标移开层后，层自动隐藏。
[/Quote]
？
daqi2010 2009-12-26
  • 打赏
  • 举报
 回复
用了。鼠标移到DIV上就消失了。DIV里面有按钮事件，用ONBLUR也不行
街头小贩 2009-12-26
  • 打赏
  • 举报
 回复 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

</head>



<body>

<div id="MYCRM" style="display:none;width:100px;height:100px;border:1px solid #ddd;">

this is a layer



</div>

<input type="button" id="myinfo" value="myinfo" />

<script type="text/javascript">

document.getElementById('myinfo').onclick=function(){

  var tm=document.getElementById('MYCRM');

  tm.style.display='block';    

  tm.onmouseout=function(){

      this.style.display='none';

  }

} 



</script>

</body>

</html>
Click_Me 2009-12-26
  • 打赏
  • 举报
 回复

楼上的两位 误解楼主了.. 你们没注意 主要的问题是.. 鼠标移开DIV隐藏 但可以点击链接这个方面
这才是主要 呵呵
街头小贩 2009-12-26
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 daqi2010 的回复:]
有一层 DIV ID=MYCRM
有一按钮： ID=myinfo
要实现：
当点击按钮，层显示，并且可以操作层里面的相关按钮。当鼠标移开层后，层自动隐藏。
谢谢各位了
[/Quote]
兄弟你不能自已也动动手！
街头小贩 2009-12-26
  • 打赏
  • 举报
 回复
<button id='btn1' .... />
<script type='text/javascript'>
document.getElementById('btn1').onclick=function(){

getElementById('div').style.display='block'; //你要显示的层div
}
真哥哥 2009-12-26
  • 打赏
  • 举报
 回复
当点击时document.getElementById('id').style.display="";
当鼠标离开时：$("#id").bind("mouseleave", function(){
menu = document.all.itemopen//itemopen是id
menu.style.display = "none"
});
daqi2010 2009-12-26
  • 打赏
  • 举报
 回复
有一层 DIV ID=MYCRM
有一按钮： ID=myinfo
要实现：
当点击按钮，层显示，并且可以操作层里面的相关按钮。当鼠标移开层后，层自动隐藏。
谢谢各位了
街头小贩 2009-12-26
  • 打赏
  • 举报
 回复
getElementById('div').style.display='hidden' //隐藏
getElementById('div').style.display='block' //打开

相关推荐
javascript经典特效---可显示隐藏的层.rar
可显示隐藏的层.rar可显示隐藏的层.rar
收藏一个JS层的显示与隐藏
收藏一个JS层的显示与隐藏 收藏一个JS层的显示与隐藏
层的显示与隐藏
层的显示与隐藏 　　如何实现层的关闭效果 解决思路： 层的关闭和打开其实就是层的隐藏与显 
当鼠标经过显示隐藏层asp环境源码
鼠标经过显示隐藏层 鼠标经过显示隐藏层asp环境源码
js 特效 html 特效 可显示隐藏的层
js 特效 html 特效 可显示隐藏的层 js 特效 html 特效 可显示隐藏的层
发帖
JavaScript

8.7w+

社区成员

22.4w+

社区内容

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2009-12-26 10:02
社区公告
暂无公告