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


我想点击右边的搜索时弹出一个下拉菜单，然后点击其他地方时下拉菜单消失  ，请问该怎么解决下面是我的代码
<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>
这样的话当鼠标点击下拉菜单的选项时    就消失了    所以请教有没有其他的办法实现呢  坐等。。

解决方案 »

  1.   

    右边那是一幅图片   你没有图片   当然就没显示了  下面是完整的代码   你可以复制用来测试  谢谢啦<!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>
      

  2.   

    <DIV id="search" onblur="hidden_search_items();" >
    这样的话，自然最先执行的就是hidden_search_items()，还点什么选项了。解决很容易，别在这里放hidden_search_items()。在周围别的DIV里onmouseover事件中调用它。