最后的鼠標點擊事件 能否幫我看看哪里有問題呀
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html";charset="utf-8">
<title>taobao demo</title>
<style type="text/css">
@font-face {
? ?font-family: iconfont;
? ?src: url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot);
? ?src: url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot?#iefix) format("embedded-opentype"),
? ?url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.woff) format("woff"),
? ?url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.tff) format("truetype"),
? ?url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.svg#uxiconfont) format("svg");
}
<i class="iconfont">?</i>
body{
font: 12px/1.5 tahoma,arial,sans-serif;
}
a{
text-decoration: none;
}
.search-container{
position: relative;
}
.search-tips{
float: right;
padding: 3px 0 0 15px;
}
.search-tips a {
color: #6c6c6c;
}
.search-button{
float: right;
}
button{
width: 100px;
height: 47px;
}
? ? ? ? .btn-search{
? ? ? ? background-image: url(http://gtms01.alicdn.com/tps/i1/T1qyj8Fc8aXXc4E9bI-400-300.png);
? ? ? ? width: 100px；
? ? ? ? height:47px;
? ? ? ? background-position: 0 -200px;
? ? ? ? border:0;
? ? ? ? cursor: pointer;
? ? ? ? }
? ? ? ? .search-common-panel{
? ? ? ? height: 39px;
? ? ? ? background-color: #f50;
? ? ? ? overflow: hidden;
? ? ? ? padding: 3px 0 5px 77px;
? ? ? ? }
? ? ? ? .search-common-panel input{
? ? ? ? height: 39px;
? ? ? ? line-height: 39px;
? ? ? ? width: 100%;
? ? ? ? border: 0 none;
? ? ? ? outline: 0;
? ? ? ? background-color: #fff;
? ? ? ? }
? ? ? ? .search-common-panel i{
? ? ? ? position: absolute;
? ? ? ? top: 16px;
? ? ? ? left: 86px;
? ? ? ? z-index: 2;
? ? ? ? color: #ccc;
? ? ? ? }
? ? ? ? .iconfont{
? ? ? ? font-family: iconfont;
? ? ? ? font-size: 12px;
? ? ? ? font-style: normal;
? ? ? ? }
? ? ? ? ul{
? ? ? ? list-style: none;
? ? ? ? ? ? display: block;
? ? ? ? }
? ? ? ? ul,li{
? ? ? ? margin: 0;
? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? .search-list li{
? ? ? ? display: none;
? ? ? ? height: 39px;
? ? ? ? line-height: 39px;
? ? ? ? overflow: hidden;
? ? ? ? text-align: center;
? ? ? ? }
? ? ? ? .search-list li a{
? ? ? ? color: #6c6c6c;
? ? ? ? }
? ? ? ? .search-list .selected{
? ? ? ? background:#f6f6f6;
? ? ? ? display: block;
? ? ? ? }
? ? ? ? .search-list{
? ? ? ? position: absolute;
? ? ? ? top: 3px;
? ? ? ? left: 3px;
? ? ? ? width: 72px;
? ? ? ? height: 41px;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? background:#fff;
? ? ? ? ? ? border-left: 1px solid #f6f6f6;
? ? ? ? ? ? border-right: 1px solid #e5e5e5;
? ? ? ? }
? ? ? ? .trigger-hover{
? ? ? ? height: auto;
? ? ? ? }
? ? ? ?
? ? ? ? li a{
? ? ? ? ? ? text-decoration: none;
? ? ? ? ? ? font-size: 14px;
? ? ? ? ? ? color: #6c6c6c;
? ? ? ? }
? ? ? ? li:hover {
? ? ? ? ? ? background: #f3f3f3;
? ? ? ? }
? ? ? ? .search-list:hover { /*鼠標懸停時下拉列表展開*/
? ? ? ? ? ? height: 78px;
? ? ? ? }
? ? ? ? .trigger-hover li{
? ? ? ? display: block;
? ? ? ? }
</style>
</head>
<body>
<div class="search-container">
<div id="search_tab" class="search-list">
<ul>
<li id="tab_1" class="selected">
<a href="#">寶貝</a>
</li>
<li id="tab_2">
<a href="#">店鋪</a>
</li>
</ul>
</div>
<div class="search-pannel">
<form>
<div class="search-tips">
<a href="#">
高級<br>搜索
</a>
</div>
<div class="search-button">
<button class="btn-search" type="submit"></button></div>
? ? ? ? ? ? <div class="search-common-panel">
? ? <input type="text" x-webkit-speech=" ">
? ? <i class="iconfont">?</i>
? ? ? ? ? ? </div>
</form>
</div>
</div>
</body>
<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.attacjEvent('on'+event,fn);
? ? }
? ? }
? ? addEvent('search_tab','mouseover',function(){
? ? this.className+=' trigger-hover';
? ? });
? ? addEvent('tab_1','mouseover',function(){
? ? if(this.className.indexOf('selected')<0){
? ? this.className+=' selected';
? ? ? ? }
? ? });
? ? addEvent('tab_1','mouseout',function(){
? ? this.className='';
? ? });
? ? addEvent('tab_1','click',function(){
? ? getDOM('search_tab').className='search-list';
? ? });
? ? addEvent('tab_2','click',function(){
? ? getDOM('search_tab').className='search-list';
? ? });
? ? ? addEvent('tab_2','mouseover',function(){
? ? if(this.className.indexOf('selected')<0){
? ? this.className+=' selected';
? ? ? ? }
? ? });
? ? addEvent('tab_2','mouseout',function(){
? ? this.className='';
? ? });
</script>
</html>
2019-05-01
用hover就別用mouseover和out，源代碼click確實存在問題，會同時隱藏所有li標簽，也沒有添加移除選項菜單的事件，這是我改進后的代碼：
????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.attacjEvent('on'+event,fn);
? ? ? ? }
? ? }
? ? addEvent('search_tab','mouseover',function(){
? ? ? ? if(this.className.indexOf('trigger-hover')<0){
? ? ? ? ? ? this.className+=' trigger-hover';
? ? ? ? }
? ? });
? ??
? ? addEvent('search_tab','mouseout',function(){
? ? ? ? this.className='search-list';
? ? });
? ? addEvent('tab_1','click',function(){
? ? ? ? if(this.className.indexOf('selected')<0){
? ? ? ? ? ? this.className+=' selected';
? ? ? ? ? ? getDOM('tab_2').className='';
? ? ? ? }
? ? ? ? getDOM('search_tab').className='search-list';
? ? });
? ? addEvent('tab_2','click',function(){
? ? ? ? if(this.className.indexOf('selected')<0){
? ? ? ? ? ? this.className+=' selected';
? ? ? ? ? ? getDOM('tab_1').className='';
? ? ? ? }
? ? ? ? getDOM('search_tab').className='search-list';
? ? });