                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /搜索框制作

鼠標(biāo)移開之后，mouseout事件觸發(fā)函數(shù)，使target1和target2的class被清空的問題，都不顯示了。。（我只把這個(gè)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='';
? })
? //鼠標(biāo)移開之后，mouseout事件觸發(fā)函數(shù)，使target1和target2的class被清空的問題，都不顯示了。。
? addEvent('target1','click',function(){
?????? getDOM('searchlist').className='search-list';
? })
? addEvent('target2','click',function(){
??????? getDOM('searchlist').className='search-list';
? })
?? </script>
</html>