我想点击右边的搜索时弹出一个下拉菜单,然后点击其他地方时下拉菜单消失 ,请问该怎么解决下面是我的代码
<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>
这样的话当鼠标点击下拉菜单的选项时 就消失了 所以请教有没有其他的办法实现呢 坐等。。
解决方案 »
- 急!firefox下js不能读取远程xml
- 提示信息问题
- 全选按钮代码?与一般的全选不同哦
- 为什么 5.1*100不是510
- 万分火急:如何做到鼠标移动到图画不许点击而自动显示文字小窗口
- select中鼠标点击,另一个text由这个值来变动,但不是select的value而需要<option>这个值</option>
- web页面中导入的js文件的加载顺序
- [求解]在层中用循环建立options后对其进行操作的问题
- 请教各位前辈,如何在javascript中调用Word?谢谢!(在线等待中)
- Javascript函数,出现错误?不知道错误出在哪里?
- 最新的javascript版本是多少??
- 请教高人 本人写了一个简单的循环语句为什么就不行呢
<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>
这样的话,自然最先执行的就是hidden_search_items(),还点什么选项了。解决很容易,别在这里放hidden_search_items()。在周围别的DIV里onmouseover事件中调用它。