新人请教关于js控制div的显示与隐藏的问题 在线等 谢谢啦

lyxlyxlyxlyxlll 2012-02-17 04:39:32

我想点击右边的搜索时弹出一个下拉菜单,然后点击其他地方时下拉菜单消失 ,请问该怎么解决

下面是我的代码
<script type="text/javascript">
function show_search_items(){
document.getElementById("searchitem").style.visibility="visible";
document.getElementById("searchitem").focus();

}
function hidden_search_items(){
document.getElementById("searchitem").style.visibility="hidden";

}

</script>
</HEAD>
<BODY >

<DIV class="search-box">
<DIV id="search" onClick="show_search_items()" onblur="hidden_search_items();" tabIndex=0 class="search-btn" >
</DIV>
<INPUT style="COLOR: #999999" id="searchInput" class="search-input noborder left" value="输入文件名搜索" />

<DIV id="searchitem" onblur="hidden_search_items();" style="POSITION: absolute; visibility:hidden; WIDTH: 87px; DISPLAY: block; TOP: 35px; LEFT: 208px" class="x-menu">
<DIV class="search_items" onClick="show_search_items()" onMouseOver=this.style.backgroundColor="#c7c7c7" onMouseOut=this.style.backgroundColor="#fff" >
所有文档
</DIV>
<DIV class="search_items" onMouseOver=this.style.backgroundColor="#c7c7c7" onMouseOut=this.style.backgroundColor="#fff" >
文本文档
</DIV>
<DIV class="search_items" onMouseOver=this.style.backgroundColor="#c7c7c7" onMouseOut=this.style.backgroundColor="#fff" >
Word文档
</DIV>
<DIV class="search_items" onMouseOver=this.style.backgroundColor="#c7c7c7" onMouseOut=this.style.backgroundColor="#fff" >
Excel文档
</DIV>

</DIV>

</BODY></HTML>


这样的话当鼠标点击下拉菜单的选项时 就消失了 所以请教有没有其他的办法实现呢 坐等。。
...全文
95 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
<DIV id="search" onblur="hidden_search_items();" >
这样的话,自然最先执行的就是hidden_search_items(),还点什么选项了。

解决很容易,别在这里放hidden_search_items()。在周围别的DIV里onmouseover事件中调用它。
lyxlyxlyxlyxlll 2012-02-17
  • 打赏
  • 举报
回复
。。。。但是我要点击下拉菜单的选项来触发别的事件啊 这样的话我点击就没了 不会触发事件了啊 是不是可以解决 谢谢帮忙
三石-gary 2012-02-17
  • 打赏
  • 举报
回复
上面代码已经实现了啊。。。点击别处下拉就没有了。。。
lyxlyxlyxlyxlll 2012-02-17
  • 打赏
  • 举报
回复
右边那是一幅图片 你没有图片 当然就没显示了 下面是完整的代码 你可以复制用来测试 谢谢啦

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">

<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD><STYLE>

.search-box
{
width: 289px;
background:#666;
height: 26px;
}
.search-btn
{
width: 90px;
height: 26px;
cursor: pointer;
float:right;
}
.search-input
{
line-height: 21px;
margin: 1px 0px 0px 5px;
padding-left: 2px;
width: 187px;
height: 21px;
color: #999;
border:none;
}
.x-menu
{
font-family: Tahoma,Geneva,sans-serif,"宋体"; FONT-SIZE: 13px;
border-bottom: #d9d9d9 1px solid;
border-left: #d9d9d9 1px solid;
background: #fff;
border-top: #d9d9d9 1px solid;
border-right: #d9d9d9 1px solid;
display:none;
}
.search_items
{
padding-bottom: 1px;
line-height: 20px;
padding-left: 3px;
padding-right: 0px;
height: 20px;
cursor: default;
padding-top: 1px;
color: #53585c;


}

</STYLE>
<script type="text/javascript">
function show_search_items(){
document.getElementById("searchitem").style.visibility="visible";
document.getElementById("searchitem").focus();

}
function hidden_search_items(){
document.getElementById("searchitem").style.visibility="hidden";

}

</script>
</HEAD>
<BODY >

<DIV class="search-box">
<DIV id="search" onClick="show_search_items()" onblur="hidden_search_items();" tabIndex=0 class="search-btn" >
</DIV>
<INPUT style="COLOR: #999999" id="searchInput" class="search-input noborder left" value="输入文件名搜索" />

<DIV id="searchitem" onblur="hidden_search_items();" style="POSITION: absolute; visibility:hidden; WIDTH: 87px; DISPLAY: block; TOP: 35px; LEFT: 208px" class="x-menu">
<DIV class="search_items" onClick="show_search_items()" onMouseOver=this.style.backgroundColor="#c7c7c7" onMouseOut=this.style.backgroundColor="#fff" >
所有文档
</DIV>
<DIV class="search_items" onMouseOver=this.style.backgroundColor="#c7c7c7" onMouseOut=this.style.backgroundColor="#fff" >
文本文档
</DIV>
<DIV class="search_items" onMouseOver=this.style.backgroundColor="#c7c7c7" onMouseOut=this.style.backgroundColor="#fff" >
Word文档
</DIV>
<DIV class="search_items" onMouseOver=this.style.backgroundColor="#c7c7c7" onMouseOut=this.style.backgroundColor="#fff" >
Excel文档
</DIV>

</DIV>

</BODY></HTML>
三石-gary 2012-02-17
  • 打赏
  • 举报
回复
给下拉菜单页写上方法。。

你上面的代码是不是有问题啊。。我复制后运行并没有右边的东西啊。。

87,901

社区成员

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

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