点击链接出现下拉菜单，知道鼠标在下拉菜单以外的地方点击，使得下拉菜单消失,该如何处理
日期：2014-05-16 浏览次数：20328 次
点击链接出现下拉菜单，知道鼠标在下拉菜单以外的地方点击，使得下拉菜单消失
例如百度，google上面的链接，点击链接之后，出现下拉菜单，鼠标离开不消失，知道鼠标点击菜单以外的地方，才会使下拉菜单消失。这样的功能怎么实现？谁能给个类似的代码参考一下？
------解决方案--------------------
就是给document监听一个click事件
例如百度，google上面的链接，点击链接之后，出现下拉菜单，鼠标离开不消失，知道鼠标点击菜单以外的地方，才会使下拉菜单消失。这样的功能怎么实现？谁能给个类似的代码参考一下？
------解决方案--------------------
就是给document监听一个click事件
- JScript code
$(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;
}
});
------解决方案--------------------
上面几位的方法都很好 不过我和楼主一样都是刚学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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
