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

时间：2022-11-02 23:43:59
例如百度，google上面的链接，点击链接之后，出现下拉菜单，鼠标离开不消失，知道鼠标点击菜单以外的地方，才会使下拉菜单消失。这样的功能怎么实现？谁能给个类似的代码参考一下？

7 个解决方案

#1

就是给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;

		    }

		});

#2

引用 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;
        ……
这个不错。。。

#3

该回复于2011-05-16 14:31:19被版主删除

#4

引用 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;
        ……

可能我没有说明白，这面是一个下拉菜单，它只能通过点击“首页 ”标签才能显示和隐藏，我要的效果当鼠标离开下拉菜单的时候，菜单继续显示，直到鼠标点击“首页”标签或者是点击下拉菜单意外的部分使下拉菜单消失。（我刚刚开始接触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>

#5



<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>

#6

上面几位的方法都很好  不过我和楼主一样都是刚学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>

#7

toury 的方法，点击标签时下拉标签会出来，但是要想下拉标签消失，除非再次点击标签呀。。。还是不能实现功能。

#1

就是给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;

		    }

		});

#2

引用 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;
        ……
这个不错。。。

#3

该回复于2011-05-16 14:31:19被版主删除

#4

引用 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;
        ……

可能我没有说明白，这面是一个下拉菜单，它只能通过点击“首页 ”标签才能显示和隐藏，我要的效果当鼠标离开下拉菜单的时候，菜单继续显示，直到鼠标点击“首页”标签或者是点击下拉菜单意外的部分使下拉菜单消失。（我刚刚开始接触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>

#5



<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>

#6

上面几位的方法都很好  不过我和楼主一样都是刚学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>

#7

toury 的方法，点击标签时下拉标签会出来，但是要想下拉标签消失，除非再次点击标签呀。。。还是不能实现功能。
标签：

相关文章