下拉菜单怎么实现点击任何地方都关闭啊？现在只有点X才能关

jsjsrrr 2010-11-05 12:07:21
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0021)http://www.hao123.com/ -->
<HTML><HEAD><TITLE>百度一下，你就知道</TITLE>
<META http-equiv=Content-Type content=text/html;charset=gb2312>
</head><style type="text/css">
.m{
border:1px solid #CCFF33;
width:10px;
float: right;
}
.z{
border:1px dotted #00CCFF;
width:50px;
top: 12px;
right: -60px;
position: absolute;
position:absolute;

}
ul{
padding:0;
margin:0;
list-style:none;
display:none;
float: right;
}
.kk{

border: thin solid #006699;
width: 250px;
height: 50px;
position: relative;
}
.body{
text-align: center;
}
</style>

<body><div class="kk">
<div class="m" onClick="show()">x</div>
<ul class="z" id="sL">
<li>yyyyyyy</li>
<li>yyyyyyy</li>
<li>yyyyyyy</li>
<li>yyyyyyy</li>
<li>yyyyyyy</li>
</ul>
</div>
<div class="kk"></div>
</body>
<script>
function show()
{
var tag = document.getElementById("sL")
if (tag.style.display=="none")
{
tag.style.display = "block"
}else{
tag.style.display = "none"
}
}
</script>
</html>
...全文
529 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
zoyation 2010-11-05
  • 打赏
  • 举报
 回复 
<div class="m" onclick="show(true)" onMouseOut="show(false)">fghsgfsfsgd</div>

  <ul class="z" id="sL">

  <li>yyyyyyy</li>

  <li>yyyyyyy</li>

  <li>yyyyyyy</li>

  <li>yyyyyyy</li>

  <li>yyyyyyy</li>

  </ul>

</div>



<script>

  function show(bo)

  {

  var tag = document.getElementById("sL")

  if (bo)

  {

  tag.style.display = "block"

  }else{

  tag.style.display = "none"

  }

  }

</script>

这样应该可以了
猿敲月下码 2010-11-05
  • 打赏
  • 举报
 回复 
var divId = ...// 获取你的层的Id

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

			e = window.event||e;

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

		    var id = obj.id;

		    if(id != divId){

		    	// ... 隐藏操作

		    	return;

		    }

		});

大体是这样的思路
tang871015 2010-11-05
  • 打赏
  • 举报
 回复
<script>
function show()
{
var tag = document.getElementById("sL")
if (tag.style.display=="none")
{
tag.style.display = "block"
}else{
tag.style.display = "none"
}
}
document.onclick=new Function("show()");
</script>
在document上注册一个事件
hch126163 2010-11-05
  • 打赏
  • 举报
 回复
<body><div class="kk" id="divKK">
<div class="m" onClick="show()">x</div>
<ul class="z" id="sL">
<li>yyyyyyy</li>
<li>yyyyyyy</li>
<li>yyyyyyy</li>
<li>yyyyyyy</li>
<li>yyyyyyy</li>
</ul>
</div>
<div class="kk"></div>
</body>
<script>
function show()
{
var tag = document.getElementById("sL")
if (tag.style.display=="none")
{
tag.style.display = "block"
}else{
tag.style.display = "none"
}
}

window.onload=function(){

document.getElementById("divKK").onclick=function(e){
if(e && e.stopPropagation){
//W3C取消冒泡事件
e.stopPropagation();
}else{
//IE取消冒泡事件
window.event.cancelBubble = true;
}
};
document.body.onclick=function(){
document.getElementById("sL").style.display = "none";
};
};
</script>
phper002 2010-11-05
  • 打赏
  • 举报
 回复
下拉列表你可以使用select标签。并在body标签中加上事件属性来完成你要的功能
jsjsrrr 2010-11-05
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 m4a1007 的回复:]
<script type="text/javascript" language="javascript">
var tag = document.getElementById("sL");
document.onmousedown=(function (event)
{
event = window.event|| event;
obj = event.srcElement ? ……
[/Quote]
我在下拉效果里面增加链接 但是点击不会转跳链接 而是关闭下拉效果 能在帮我看看嘛？
lanpinghan 2010-11-05
  • 打赏
  • 举报
 回复
Menu.css 中的代码内容如下：
#main_menu * {
border:0 none;
padding:0;
}
#main_menu {
float:left;
line-height:20px;
list-style-type:none;
margin-bottom:10px;
}
#main_menu a {
display:block;
text-align:center;
width:160px;
}
#main_menu a:visited {
text-decoration:none;
}
#main_menu li a:hover {
background:none repeat scroll 0 0 #999999;
}
#main_menu li ul {
left:-999em;
line-height:20px;
list-style-type:none;
position:absolute;
text-align:left;
width:160px;
}
#main_menu li ul li {
background:none repeat scroll 0 0 #F6F6F6;
float:left;
width:160px;
}
#main_menu li ul a:visited {
color:#666666;
text-decoration:none;
}

#main_menu li.hover_ie_fix ul {
left:auto;
}



Menu.js 中代码内容如下：
function menu_ie_fix(){
var Element = document.getElementById("main_menu").getElementsByTagName("li");
for (var i=0; i<Element.length; i++){
Element[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "hover_ie_fix";
}

Element[i].onMouseDown=function(){
this.className+=(this.className.length>0? " ": "") + "hover_ie_fix";
}

Element[i].onMouseUp=function()
{
this.className+=(this.className.length>0? " ": "") + "hover_ie_fix";
}

Element[i].onmouseout=function()
{
this.className=this.className.replace(new RegExp("( ?|^)hover_ie_fix\\b"),"");
}
}

}

window.onload=menu_ie_fix;



html 中代码内容如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<link href="Menu.css" rel="stylesheet" type="text/css">
<script src="Menu.js" type="text/javascript"></script>
<body>
<div id="main_menu" class="site_nav_bar">
<div id="ServiceNavItem" class="site_nav_item">
<li class="">
<a href="#">服务支持</a>
<ul>
<li class="">
<a href="#">新闻公告</a>
</li>
<li class="">
<a href="#">资源下载</a>
</li>
<li class="">
<a href="#">问题解答</a>
</li>
</ul>
</li>
</div>
</div>
</body>
</html>
jsjsrrr 2010-11-05
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 m4a1007 的回复:]
<script type="text/javascript" language="javascript">
var tag = document.getElementById("sL");
document.onmousedown=(function (event)
{
event = window.event|| event;
obj = event.srcElement ? ……
[/Quote]
你这个有点效果了，，，但是点下拉菜单也关闭了 等于没用.....
hch126163 2010-11-05
  • 打赏
  • 举报
 回复
$(document).click(function(e){
e = window.event||e;
obj = e.srcElement ? e.srcElement : e.target;
var id = obj.id;

用 触发事件对象的ID 判断是有问题的，因为，显示的ul 内部的 li a 等子元素都会事件冒泡到document！
而点击显示的这个ul,或者ul 内部的子元素，是不应该关闭的！
M4A1007 2010-11-05
  • 打赏
  • 举报
 回复
<script type="text/javascript" language="javascript">
var tag = document.getElementById("sL");
document.onmousedown=(function (event)
{
event = window.event|| event;
obj = event.srcElement ? event.srcElement : event.target;
var id = obj.id;
if(id != tag.id)
{
tag.style.display="none";
return;
}

}
);

function show()
{
tag.style.display=(tag.style.display=="none" || tag.style.display=="")?"block":"none";
}
</script>
jsjsrrr 2010-11-05
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 thc1987 的回复:]
JScript code
var divId = ...// 获取你的层的Id
$(document).click(function(e){
e = window.event||e;
obj = e.srcElement ? e.srcElement : e.target;
var id = obj.id;
……
[/Quote]
能帮我贴个完整的代码出来吗？
jsjsrrr 2010-11-05
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 hch126163 的回复:]
引用 4 楼 hch126163 的回复:

<body><div class="kk" id="divKK">
<div class="m" onClick="show()">x</div>
<ul class="z" id="sL">
<li>yyyyyyy</li>
<li>yyyyyyy</li>
<li>yyyyyyy</li>
<li>yyyyyyy</li>
<li……
[/Quote]
环境是IE6
我想弹出的下拉菜单后 我点浏览器任何一个位置都让它可以缩回去 还原成原来的样子就行
这是百度首页的 我想它打开后 随便点个地方能关闭
hch126163 2010-11-05
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 hch126163 的回复:]

<body><div class="kk" id="divKK">
<div class="m" onClick="show()">x</div>
<ul class="z" id="sL">
<li>yyyyyyy</li>
<li>yyyyyyy</li>
<li>yyyyyyy</li>
<li>yyyyyyy</li>
<li>yyyyyyy</l……
[/Quote]

楼主什么环境啊？我IE、FF测试都ok!!

还是我没能明白你的意思呢？
<ul class="z" id="sL"> 你要点击这个弹出菜单也关闭？
如果是，那么不要这个阻止事件冒泡的代码就可以了

document.getElementById("divKK").onclick=function(e){
if(e && e.stopPropagation){
//W3C取消冒泡事件
e.stopPropagation();
}else{
//IE取消冒泡事件
window.event.cancelBubble = true;
}
};
jsjsrrr 2010-11-05
  • 打赏
  • 举报
 回复
每个都试了没一个行的......
jsjsrrr 2010-11-05
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 ahopedog 的回复:]
在document加上一个click事件
[/Quote]
怎么加呢......
jsjsrrr 2010-11-05
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 yangxingzou 的回复:]
JScript code
<div class="m" onclick="show(true)" onMouseOut="show(false)">fghsgfsfsgd</div>
<ul class="z" id="sL">
<li>yyyyyyy</li>
<li>yyyyyyy</li>
<li>yyyyyyy</li>
<li>yyyyyyy</li>
……
[/Quote]不行哦大哥 我是要在其他任何地方点击一下才让他消失...你这个是离开区域关闭哦 在帮我看看拉....
ahopedog 2010-11-05
  • 打赏
  • 举报
 回复
在document加上一个click事件
Android自定义PopupWindow
在Android开发中，`PopupWindow` 是一个非常重要的组件，它允许我们创建浮动、弹出式的视图，常用于下拉菜单、提示信息或者快捷操作等场景。本篇将深入探讨如何自定义`PopupWindow`，使其满足各种复杂的业务需求。 ...
vue 自定义指令 实现点击下拉菜单外部区域关闭下拉菜单
这里我们点击菜单，下拉菜单就会显示，点击下拉菜单以外的区域就会隐藏。 这是一个简单的例子： 这里增加一个选项，就是当我们按下esc键的时候，下拉菜单也可以关闭。 先贴出代码： &lt;template&gt; &...
Vue自定义指令实现可从外部关闭的下拉菜单
实现功能：点击button弹出下拉菜单，然后点击页面中其他空白区域（除了菜单本身外），菜单就关闭了。 实现思路：(a) 点击下拉菜单本身是不会关闭的  (b) 点击下拉菜单以外的所有区域都要关闭 代码实现： index....
Bootstrap完美select标签下拉菜单实现
下拉菜单实现 初级者使用bootstrap框架时，大部分对官方提供的下拉菜单dropdown组件不是很感冒！ 所以，这里就提供简单原生下拉标签&amp;amp;amp;amp;amp;lt;select&amp;amp;amp;amp;amp;gt;&amp;amp;...
实现美观实用的绿色下拉菜单——jQuery项目教程
本文还有配套的精品资源，点击获取 简介：本教程详细介绍了如何使用jQuery、CSS和HTML5制作一个绿色主题的下拉菜单。介绍了下拉菜单在网页设计中的作用、jQuery库的特性以及HTML5在导航菜单构建中的应用。...
JavaScript

87,993

社区成员

224,694

社区内容

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

加载中

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

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

+ 用AI写文章