鼠标点击事件 div 显示隐藏问题

如上图，下面的div层最开始是隐藏的，1、当鼠标单击上面文本框时，div显示2、当鼠标在文本框和下面层之外的地方点击，div隐藏3、（文本框的onclick事件只能做到在... 如上图，下面的div层最开始是隐藏的，
1、当鼠标单击上面文本框时，div 显示
2、当鼠标在文本框和下面层之外的地方点击，div 隐藏
3、（文本框的 onclick事件只能做到在文本框和文本框之外进行div的隐藏和显示，重点是当div显示时，显示的信息 111111,2222,3333 这些是链接，所以这里必须要做到当鼠标在div层内鼠标点击时，div不会隐藏）

求指点
<script type="text/javascript">
$(function(){
$("div").each(function(){
$(this).click(function(){
var e = event;
if (e && e.stopPropagation){
e.stopPropagation() ;
}else{
window.event.cancelBubble=true ;
}
});
});
});
</script> 展开

 我来答

5个回答

#热议# 为什么有人显老，有人显年轻？

匿名用户
2013-09-22

展开全部

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>01 - 折叠菜单</title>
<style type="text/css">
.menu{border:solid 1px #00ff40; width:80px;height:22px; background:#1d5c45; padding:5px;overflow:hidden;}
.menu a{display:block;font-size:17px;font-family:"微软雅黑";text-align:center;height:24px;text-decoration:none; line-height:24px;color:#000000;}
.menu a:hover{border:dashed 1px #ffff00;;color:#FFFFFF; font-size:15px;background:#9dbbab;}
.title_Menu{height:12px;background:#9dbbab;}
.body_Menu{background:#g;}
</style>
<script type="text/javascript">
window.onload = function(){
var tit_a = document.getElementsByTagName("a");

function action(){
if(this.parentNode.offsetHeight == 34){
this.parentNode.style.height = "auto";
}else{
this.parentNode.style.height = "25px";
}
}
for( var r,i=0;r=tit_a[i++];){
console.log(r);
if(r.className == "title_Menu"){
r.onclick = action;
}
}
}
</script>
</head>
<body>
<div class="menu">
<a href="#" class="title_Menu">荤　菜</a>
<a href="#" class="body_Menu">荤菜1</a>
<a href="#" class="body_Menu">荤菜2</a>
<a href="#" class="body_Menu">荤菜3</a>
<a href="#" class="body_Menu">荤菜4</a>
<a href="#" class="body_Menu">荤菜5</a>
</div>
<div class="menu">
<a href="#" class="title_Menu">素　菜</a>
<a href="#" class="body_menu">素菜1</a>
<a href="#" class="body_menu">素菜2</a>
<a href="#" class="body_menu">素菜3</a>
<a href="#" class="body_menu">素菜4</a>
<a href="#" class="body_menu">素菜5</a>
</div>
<div class="menu">
<a href="#" class="title_Menu">炖　菜</a>
<a href="#" class="body_menu">炖菜1</a>
<a href="#" class="body_menu">炖菜2</a>
<a href="#" class="body_menu">炖菜3</a>
<a href="#" class="body_menu">炖菜4</a>
<a href="#" class="body_menu">炖菜5</a>
</div>
<div class="menu">
<a href="#" class="title_Menu">凉　菜</a>
<a href="#" class="body_menu">凉菜1</a>
<a href="#" class="body_menu">凉菜2</a>
<a href="#" class="body_menu">凉菜3</a>
<a href="#" class="body_menu">凉菜4</a>
<a href="#" class="body_menu">凉菜5</a>

</div>
</body>
试试这个，我刚写的

已赞过 已踩过<

评论收起

百度网友1f463fa
推荐于2018-03-13 · TA获得超过685个赞

知道小有建树答主

回答量：600

采纳率：0%

帮助的人：468万

我也去答题访问个人页

关注

展开全部

那我答你重点好了

当点击文本框或下面的div 的时候，div不会隐藏
你需要设定点击document，div隐藏
然后在文本框和div的点击事件里【阻止事件冒泡】，
event.stopPropagation(); // Mozilla and Opera
window.event.cancelBubble = true; // IE

自己搜索下会更容易记住

追问

请看上面补充问题的JS

checktext() 显示div 、uncheck() 隐藏div
 
    1111111

追答

jquery的click事件绑定啊，然后在事件冒泡后面继续写你点击div的事件，

另外我说的“你需要设定点击document，div隐藏”，

$(document).click(function(){你的div隐藏})

要是你不懂jquery

你就用这段：

var e = event;
       if (e && e.stopPropagation){  
                  e.stopPropagation() ;
       }else{ 
              window.event.cancelBubble=true  ; 
       }  
写在你那个  div层 的点击事件里面

本回答被提问者和网友采纳

已赞过 已踩过<

评论收起

halibote427
2013-09-11

知道答主

回答量：6

采纳率：0%

帮助的人：5.4万

我也去答题访问个人页

关注

展开全部

js 动态加到css中 display:none;

追问

求详解

已赞过 已踩过<

评论收起

百度网友fe2b428
2018-03-13 · TA获得超过449个赞

知道小有建树答主

回答量：286

采纳率：82%

帮助的人：27.9万

我也去答题访问个人页

关注

展开全部

我只能说，你这个段代码，几乎全错了~选择方式也很随意~请你重新整理你的代码，而且请你把文档结构代码也发出来，不然一般人看不懂你的代码的~

已赞过 已踩过<

评论收起

my...8@sohu.com
2018-03-13 · TA获得超过340个赞

知道小有建树答主

回答量：296

采纳率：72%

帮助的人：47.3万

我也去答题访问个人页

关注

展开全部

输入框失去焦点的时候，判断鼠标是否在div内。
设置一个全局变量。当鼠标在div上时候，变量设置一个值a。鼠标离开div时另一个值b。
具体做法是当失去焦点的时候开启一个setTimeout函数，在这个函数里面判断这个全局变量。
如果是是b就关闭，如果是a推出。
不知道理解不理解，感觉你能理解。

已赞过 已踩过<

评论收起

2条折叠回答

更多回答（3）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

鼠标点击事件 div 显示隐藏 问题

其他类似问题

为你推荐：

鼠标点击事件 div 显示隐藏问题