                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /搜索框制作

鼠标移开之后，mouseout事件触发函数，使target1和target2的class被清空的问题，都不显示了。。（我只把这个searchlist贴在下面，摆脱哪位大侠帮我看看~~）

<!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>
<style>
*{margin: 0;padding: 0;text-decoration: none;border: 0;list-style: none;}
ul{display: block;}
a{display: block;width: 100%;height: 100%; color:#000000;}
.search-list{position: absolute;top:3px;left:3px;background-color: #ffffff;height:32px;width:70px;overflow:hidden;z-index: 2}
.search-list li{display: none;overflow:hidden;width:70px;height: 35px;line-height: 35px;font-size: 18px;text-align: center;}
.search-list .selected{display: block;background-color:gray;}
.targethover{height:auto;}
.targethover li{display:block;}
</style>
</head>
<body>
<div id="search-container">
        <div id="searchlist" class="search-list">
            <ul>
               <li id="target1" class="" ><a href="#">宝贝</a></li>
               <li id="target2" class="selected" ><a href="#">店铺</a></li>
            </ul>
        </div>
</div>
</body>
<script type="text/javascript" src="jquery-3.1.1.slim.min.js"></script>

<script>
   var getDOM= function(id){
       return document.getElementById(id);
   }
   var addEvent=function (id,event,fn) {
       var el= getDOM(id)||document;
       if(el.addEventListener){
           el.addEventListener(event,fn,false);
       }else if(el.attachEvent){
           el.attachEvent('on'+event,fn);
       }
}
   addEvent('searchlist','mouseover',function () {
       this.className+=' targethover ';
})
addEvent('target1','mouseover',function(){
       if(this.className.indexOf('selected')<0){
       this.className=' selected ';
    }
})
addEvent('target2','mouseover',function(){
    if(this.className.indexOf('selected')<0){
    this.className=' selected ';
}
})
addEvent('target1','mouseout',function(){
    this.className='';
})
addEvent('target2','mouseout',function(){
    this.className='';
})
//鼠标移开之后，mouseout事件触发函数，使target1和target2的class被清空的问题，都不显示了。。
addEvent('target1','click',function(){
       getDOM('searchlist').className='search-list';
})
addEvent('target2','click',function(){
        getDOM('searchlist').className='search-list';
})
   </script>
</html>