点击链接出现下拉菜单，知道鼠标在下拉菜单以外的地方点击，使得下拉菜单消失

justimkiss 2011-05-14 11:15:15
例如百度，google上面的链接，点击链接之后，出现下拉菜单，鼠标离开不消失，知道鼠标点击菜单以外的地方，才会使下拉菜单消失。这样的功能怎么实现？谁能给个类似的代码参考一下？
...全文
449 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
mxl_冰糖雪梨 2012-05-31
  • 打赏
  • 举报
 回复
toury 的方法，点击标签时下拉标签会出来，但是要想下拉标签消失，除非再次点击标签呀。。。还是不能实现功能。
toury 2011-05-17
  • 打赏
  • 举报
 回复 


<script type="text/javascript">

function show(){

  var context = document.getElementById("context");

  var dis=context.style.display;

  context.style.display=dis=="block"?"none":"block";

}



document.onclick=function(event){

  e=event||window.event;

  var el=e.srcElement||e.target;

  if(el.parentNode.parentNode.id=='context'){

    context.style.display=dis=="none";

  }

}

</script>
幕子丿昔 2011-05-17
  • 打赏
  • 举报
 回复
上面几位的方法都很好 不过我和楼主一样都是刚学JS 很多东西都看不太懂
我想到一个比较笨的方法 暂时有用 就照楼主的代码 加了些东西

<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function show(){
var context = document.getElementById("context");
if(context.style.display == "block"){
context.style.display = "none";
} else{
context.style.display = "block";
}
};
function hide(){
var context = document.getElementById("context");
context.style.display = "none";
};
</script>
<style type="text/css">
.menu {
font-family: arial, sans-serif;

margin:0;
margin:0px 0;

}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}

.menu ul li {

position:relative;
width:200px;
}

.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:104px;

color:#000;

border-width:1px 1px 0 0;
background: #3333FF;
line-height:30px;
font-size:11px;
}
.menu ul li ul {

display: none;
}
.menu ul li:hover a {
color:#fff;
background:#6699FF;
}
.menu ul li:hover ul {
// display:block;
position:absolute;
top:31px;
left:0;
width:105px;
}
.menu ul li:hover ul li a {
// display:block;
background:#3333FF;
color:#000;
}
.menu ul li:hover ul li a:hover {
background:#6699FF;
color:#000;
}
#cc{width:100%;height:100%;position:absolute;left:0px;top:0px;}
</style>
</head>
<body>
<div id="cc" onclick="hide();"></div>
<div class="menu" >
<ul >
<li><a class="hide" id="sy" href="javascript:show();" style="font-size: 15px;color: #ffffff; " >首页</a><div id="kk">
<ul id="context">
<li style="border:0px;"><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li style="border:0px;"><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li style="border:0px;"><a href="../menu/form.html" title="Styling forms">styled form</a></li>
</ul></div>
</li>
</ul>
</div>
</body>
</html>

justimkiss 2011-05-16
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 thc1987 的回复:]

就是给document监听一个click事件

JScript code
$(document).click(function(e){
e = window.event||e;
obj = e.srcElement ? e.srcElement : e.target;
var id = obj.id;
……
[/Quote]
可能我没有说明白，这面是一个下拉菜单，它只能通过点击“首页 ”标签才能显示和隐藏，我要的效果当鼠标离开下拉菜单的时候，菜单继续显示，直到鼠标点击“首页”标签或者是点击下拉菜单意外的部分使下拉菜单消失。（我刚刚开始接触JS，很多地方都不是很懂，假如有说错的地方，各位前辈多多包涵。）
代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.menu {
font-family: arial, sans-serif;

margin:0;
margin:0px 0;

}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}

.menu ul li {

position:relative;
width:200px;
}

.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:104px;

color:#000;

border-width:1px 1px 0 0;
background: #3333FF;
line-height:30px;
font-size:11px;
}
.menu ul li ul {

display: none;
}
.menu ul li:hover a {
color:#fff;
background:#6699FF;
}
.menu ul li:hover ul {
// display:block;
position:absolute;
top:31px;
left:0;
width:105px;
}
.menu ul li:hover ul li a {
// display:block;
background:#3333FF;
color:#000;
}
.menu ul li:hover ul li a:hover {
background:#6699FF;
color:#000;
}
</style>
</head>

<body>
<div class="menu" >
<ul >
<li><a class="hide" href="javascript:show();" style="font-size: 15px;color: #ffffff; " >首页</a><div id="kk">
<ul id="context">
<li style="border:0px;"><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li style="border:0px;"><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li style="border:0px;"><a href="../menu/form.html" title="Styling forms">styled form</a></li>
</ul></div>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
function show(){
var context = document.getElementById("context");
if(context.style.display == "block"){
context.style.display = "none";
} else{
context.style.display = "block";
}
}
</script>


</html>
休谱诺斯 2011-05-16
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 thc1987 的回复:]

就是给document监听一个click事件

JScript code
$(document).click(function(e){
e = window.event||e;
obj = e.srcElement ? e.srcElement : e.target;
var id = obj.id;
……
[/Quote]这个不错。。。
猿敲月下码 2011-05-16
  • 打赏
  • 举报
 回复
就是给document监听一个click事件

$(document).click(function(e){

			e = window.event||e;

		    obj = e.srcElement ? e.srcElement : e.target;

		    var id = obj.id;

		    if(id != comboInputId){ // 如果不是点击输入框

		    	$comboContent.hide(); // $comboContent是下拉框部分

		    	return;

		    }

		});
html中鼠标离开二级菜单马上消失,【前端】跪求大神:鼠标点击菜单以外的地方 使下拉菜单消失...
本文介绍了如何实现HTML二级菜单在鼠标点击菜单外区域时消失的效果。通过阻止事件冒泡，监听document的点击事件来控制菜单的显示与隐藏。提供了两种方案：一是使用事件冒泡机制，二是绑定事件到document上进行判断。这些方法可以确保菜单在用户点击菜单以外的区域时关闭。
jQuery练习——下拉菜单
本文是jQuery案例练习的第一期，讲解如何使用jQuery创建下拉菜单。通过HTML、CSS和jQuery代码实现，当鼠标悬停在一级菜单上时，显示二级菜单，移开则隐藏。内容包括HTML结构、CSS样式设计以及jQuery的mouseover和mouseout事件处理，适合前端初学者学习。
【js】鼠标点击空白处消失
本文介绍了一种使用JavaScript实现的下拉菜单显示与隐藏功能。通过简单的HTML结构结合JavaScript函数，可以创建响应用户交互的下拉菜单效果。当用户点击指定链接时，隐藏的菜单会显示出来；点击页面其他位置时，菜单则会自动隐藏。
js点击下拉列表按钮，显示，点击其他地方（包括下拉按钮）隐藏下拉列表
本文探讨了JavaScript中事件冒泡机制的两种控制方法：stopPropagation()与cancelBubble，通过实例演示如何实现点击下拉菜单按钮显示菜单，并在点击页面其他区域时隐藏菜单，同时保持菜单内链接点击不受影响。
Axure导航栏移入移出显示隐藏下拉菜单——纪梵希官网导航栏动效
本文介绍了如何使用Axure制作纪梵希官网风格的导航栏动效，包括鼠标移入、点击导航选项卡时下拉菜单的显示与隐藏，以及页面跳转等交互效果。通过详细步骤解析了动效的实现方法，如设置动态面板、鼠标事件和链接跳转等。
JavaScript

87,990

社区成员

224,684

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章