自动完成第一次输入不显示
来源：3-2 改写搜索框功能--自动完成
慕粉1905369247
2020-04-20 10:55:10
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<style type="text/css">
.testdiv{
/*width: 100px;*/
/*height: 100px;*/
/*padding-top: 10px;*/
/*padding-left: 100px;*/
background-color: red;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 站点导航 -->
<div class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl"><a href="javascript:;" class="nav-site-login">亲，请登录</a></li>
<li class="fl"><a href="javascript:;" class="nav-site-signup link">免费注册</a></li>
<li class="fl"><a href="javascript:;" class="nav-site-mobile link">手机逛慕淘</a></li>
</ul>
<ul class="fr">
<li class="menu dropdown fl" data-active="menu">
<a href="javascript:;" class="dropdown-toggle link">我的慕淘<i class="dropdown-arrow icon"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="javascript:;" class="menu-item">已买到的宝贝</a></li>
<li><a href="javascript:;" class="menu-item">我的足迹</a></li>
</ul>
</li>
<li class="menu dropdown fl" data-active="menu">
<a href="javascript:;" class="dropdown-toggle link">收藏夹<i class="dropdown-arrow icon"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="javascript:;" class="menu-item">收藏的宝贝</a></li>
<li><a href="javascript:;" class="menu-item">收藏的店铺</a></li>
</ul>
</li>
<li class="fl"><a href="javascript:;" class="nav-site-category link">商品分类</a></li>
<li class="menu dropdown fl" data-active="menu" data-load="js/dropdown.json">
<a href="javascript:;" class="dropdown-toggle link">卖家中心<i class="dropdown-arrow icon"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="javascript:;" class="menu-item">加载中</a></li>
<!-- <li><a href="javascript:;" class="menu-item">免费开店</a></li>
<li><a href="javascript:;" class="menu-item">已卖出的宝贝</a></li>
<li><a href="javascript:;" class="menu-item">出售中的宝贝</a></li>
<li><a href="javascript:;" class="menu-item">卖家服务市场</a></li>
<li><a href="javascript:;" class="menu-item">卖家培训中心</a></li> -->
</ul>
</li>
<li class="nav-site-service menu dropdown fl" data-active="menu">
<a href="javascript:;" class="dropdown-toggle link">联系客服<i class="dropdown-arrow icon"></i></a>
<ul class="dropdown-layer dropdown-right">
<li><a href="javascript:;" class="menu-item">消费者客服</a></li>
<li><a href="javascript:;" class="menu-item">卖家客服</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="header">
<div class="container">
<a href="javascript:;" class="header-logo fl"></a>
<div id="header-search" class="search fl">
<form action="https://s.taobao.com/search" class="search-form">
<input type="text" class="search-inputbox fl" name="q" autocomplete="off">
<input type="submit" value="搜索" class="search-btn fl" name="">
</form>
<ul class="search-layer">
<!-- <li class="search-layer-item">1</li>
<li class="search-layer-item">1</li> -->
</ul>
</div>
<div class="cart fr"></div>
</div>
</div>
<div class="testdiv">ddd<br>ddd<br>ddd</div>
<button id="btn-show">显示</button>
<button id="btn-hide">隐藏</button>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/showHide.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>
<script type="text/javascript" src="js/search.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
@font-face {
font-family: "iconfont";
src: url('../font/iconfont.eot?t=1477124206');
/* IE9*/
src: url('../font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */
url('../font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('../font/iconfont.svg?t=1477124206#iconfont') format('svg');
/* iOS 4.1- */
}
.icon {
font-family: "iconfont" !important;
font-size: 14px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.container{
width: 1200px;
margin: 0 auto;
}
.link{
color: #4d555d;
}
.link:hover{
color: #f01414;
}
/**/
.dropdown{
position: relative;
}
.dropdown-toggle{
position: relative;
z-index: 2;
}
.dropdown-arrow{
display: inline-block;
vertical-align: middle;
}
.dropdown-layer{
display: none;
position: absolute;
z-index: 1;
overflow:hidden;
}
.dropdown-left{
left: 0;
}
.dropdown-right{
right: 0;
}
/**/
.menu .dropdown-toggle{
display: block;
height: 100%;
padding: 0 16px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}
.menu .dropdown-arrow{
margin-left: 8px;
}
.menu .dropdown-layer{
top: 43px;
background-color: #fff;
border: 1px solid #cdd0d4;
}
.menu-item{
display: block;
padding: 0 12px;
color: #4d555d;
height: 30px;
line-height: 30px;
white-space: nowrap;
}
.menu-item:hover{
background-color: #f3f5f7;
}
.menu-active .dropdown-toggle{
background-color: #fff;
border-color: #cdd0d4;
}
/*.menu-active .dropdown-layer{
display: block;
}*/
.menu-active .dropdown-arrow{
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.fadeOut{
visibility: hidden;
opacity: 0;
}
.slideUpDownCollapse{
height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.slideLeftRightCollapse{
width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/*header*/
.search{
position: relative;
border: 1px solid #cfd2d5;
}
.search-inputbox{
width: 587px;
height: 40px;
line-height: 40px;
border: none;
padding: 0 10px;
}
.search-btn{
width: 73px;
height: 40px;
line-height: 40px;
border: none;
background-color: #07111b;
cursor: pointer;
color: #fff;
}
.search-layer{
display: none;
position: absolute;
top: 100%;
left: -1px;
width: 100%;
border: 1px solid #cfd2d5;
background-color: #fff;
}
.search-layer-item{
height: 24px;
line-height: 24px;
padding: 0 10px;
cursor: pointer;
white-space: nowrap;
text-overflow: ellipsis;
overflow:hidden;
}
.search-layer-item:hover{
background-color: #f3f5f7;
}
.nav-site{
width: 100%;
background-color: #f3f5f7;
}
.nav-site .container{
height: 44px;
line-height: 44px;
border-bottom: 1px solid #cdd0d4;
}
.nav-site-login{
color: #f01414;
}
.nav-site-signup{
margin-left: 10px;
}
.nav-site-mobile{
margin-left: 10px;
}
.nav-site-category{
margin: 0 10px;
}
.nav-site-service{
margin-left: 15px;
}
/*.dropdown{
position: relative;
}
.dropdown-toggle{
position: relative;
z-index: 2;
display: block;
height: 100%;
padding: 0 16px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}
.dropdown-arrow{
display: inline-block;
width: 8px;
height: 6px;
margin-left: 8px;
vertical-align: middle;
}
.dropdown-layer{
display: none;
top: 43px;
position: absolute;
z-index: 1;
background-color: #fff;
border: 1px solid #cdd0d4;
}
.dropdown-left{
left: 0;
}
.dropdown-right{
right: 0;
}
.dropdown-item{
display: block;
padding: 0 12px;
color: #4d555d;
height: 30px;
line-height: 30px;
white-space: nowrap;
}
.dropdown-item:hover{
background-color: #f3f5f7;
}
.dropdown-active .dropdown-toggle{
background-color: #fff;
border-color: #cdd0d4;
}
.dropdown-active .dropdown-layer{
display: block;
}*/
.header{
width: 100%;
height: 124px;
background-color: #fff;
}
.header-logo{
display: block;
width: 136px;
height: 48px;
background: url(../img/header-logo.png) no-repeat;
margin: 35px 0 0 15px;
}
.header .search{
margin: 36px 0 0 145px;
}
(function($){
function Dropdown(elem,options){
this.$elem=$(elem)
this.options=options
this.$layer=this.$elem.find('.dropdown-layer')
// this.activeClass=this.$elem.data('active')+'-active';
this.activeClass=options.active+'-active';
this.init();
}
Dropdown.DEFAULTS={
event:'hover',
css:true,
js:true,
animation:'slideUpDown',
delay:500,
active:'dropdown'
}
Dropdown.prototype.init=function(){
var self=this
this.$layer.showHide(this.options)
this.$layer.on('show shown hide hidden',function(e){
self.$elem.trigger('dropdown-'+e.type)
})
if(this.options.event==='click'){
this.$elem.on("click",function(e){
self.show()
e.stopPropagation()
})
$(document).on('click',function(){
self.hide()
})
}else{
this.$elem.hover(function(){
self.show()
},function(){
self.hide()
})
}
}
Dropdown.prototype.show=function(){
var self=this;
if(this.options.delay){
this.timer=setTimeout(function(){
_show()
},this.options.delay)
}else{
_show()
}
function _show(){
self.$elem.addClass(self.activeClass)
self.$layer.showHide("show")
}
}
Dropdown.prototype.hide=function(){
if(this.options.delay){
clearTimeout(this.timer)
}
this.$elem.removeClass(this.activeClass)
this.$layer.showHide("hide")
}
$.fn.extend({
dropdown:function(option){
return this.each(function(){
var options=$.extend({},Dropdown.DEFAULTS,$(this).data(),typeof option==='object'&&option)
var dropdown=$(this).data('dropdown')
if(!dropdown){
$(this).data('dropdown',dropdown=new Dropdown(this,options))
}
// var dropdown= new Dropdown(this,options)
if(typeof dropdown[option]==='function'){
dropdown[option]()
}
})
}
})
})(jQuery)
$('.dropdown').on('dropdown-show',function(e){
var dataload=$(this).data('load');
if(!dataload) return;
if(!$(this).data('loaded')){
var $layer=$(this).find('.dropdown-layer')
var html='';
$.getJSON(dataload,function(data){
for(var i=0;i<data.length;i++){
html+='<li><a href="javascript:;" class="menu-item">'+data[i].name+'<\/a><\/li>'
}
$layer.html(html)
$(this).data('loaded',true)
})
}
})
$('.dropdown').dropdown({
// active:'menu'
});
// var testdiv=$('.testdiv')
// testdiv.showHide({
// css3:true,
// animation:'fadeSlideUpDown'
// })
// $('#btn-show').on('click',function(){
// testdiv.showHide('show')
// })
// $('#btn-hide').on('click',function(){
// testdiv.showHide('hide')
// })
$('#btn-show').on('click',function(){
$('.dropdown').dropdown('show')
})
$('#btn-hide').on('click',function(){
$('.dropdown').dropdown('hide')
})
// testdiv.on('show shown hide hidden',function(e){
// console.log(e.type)
// })
console.log(window.mt.transition.end)
var html=''
var maxNum=10
var headerSearch=$('#header-search')
headerSearch.on('search-getData',function(e,data,$layer){
html=createHeaderSearchLayer(data,maxNum)
$layer.html(html)
if(html){
$(this).search('showLayer')
}else{
$(this).search('hideLayer')
}
console.log(e.type)
console.log(data)
}).on('search-noData',function(e){
console.log(e.type)
$(this).search('hideLayer')
$layer.html('')
}).on('click','.search-layer-item',function(){
$headerSearch.search('setInputVal',$(this).html())
$headerSearch.search('submit')
})
headerSearch.search({
autocomplete:true,
url:'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1587265829751_716&callback=jsonp717&k=1&area=c2c&bucketid=13&q=',
css:false,
js:false,
animation:'fade'
})
function createHeaderSearchLayer(data,maxNum){
var html=''
var dataLength=data['result'].length;
if(dataLength===0){
return ''
}
for(var i=0;i<dataLength;i++){
if(i>=maxNum) break;
html+='<li class="search-layer-item">'+data['result'][i][0]+'</li>'
}
return html
}
(function($){
function Search(elem,options){
this.$elem=$(elem)
this.options=options
this.$search=$('.search')
this.$input=this.$elem.find('.search-inputbox')
this.$layer=this.$elem.find('.search-layer')
this.$form=this.$elem.find('.search-form')
this.$elem.on('click','.search-btn',$.proxy(this.submit,this))
if(this.options.autocomplete){
this.autocomplete()
}
}
Search.DEFAULTS={
autocomplete:false,
url:'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1587265829751_716&callback=jsonp717&k=1&area=c2c&bucketid=13&q=',
css:false,
js:false,
animation:'fade'
}
Search.prototype.submit=function(){
if($.trim(this.$input.val())===''){
return false;
}
this.$form.submit();
}
Search.prototype.autocomplete=function(){
var self=this;
this.$input
.on('input',$.proxy(this.getData,this))
.on('focus',$.proxy(this.showLayer,this))
.on('click',function(){
return false
})
this.$layer.showHide(this.options)
$(document).on('click',$.proxy(this.hideLayer,this))
}
Search.prototype.getData=function(){
var self=this;
$.ajax({
url:this.options.url+$.trim(this.$input.val()),
dataType:'jsonp'
}).done(function(data){
self.$elem.trigger('search-getData',[data,self.$layer])
}).fail(function(){
self.$elem.trigger('search-noData'[self.$layer])
})
}
Search.prototype.setInputVal=function(val){
this.$input.val(val)
}
Search.prototype.showLayer=function(){
if(this.$layer.children().length===0) return;
this.$layer.showHide('show')
}
Search.prototype.hideLayer=function(){
this.$layer.showHide('hide')
}
$.fn.extend({
search:function(option,value){
return this.each(function(){
var options=$.extend({},Search.DEFAULTS,typeof option==='object' && option)
var search=$(this).data('search')
if(!search){
$(this).data('search',search=new Search(this,options))
}
// var search=new Search(this,options)
if(typeof search[options]==='function'){
search[options](value)
}
})
}
})
})(jQuery)
// (function($){
// var search=$('.search')
// var input=search.find('.search-inputbox')
// var btn=search.find('.search-btn')
// var layer=search.find('.search-layer')
// var form=search.find('.search-form')
// // btn.on('click',function(){
// // if($.trim(input.val()==='')){
// // return false
// // }
// // })
// form.on('submit',function(){
// if(input.val()===''){
// return false
// }
// })
// input.on('input',function(){
// var url='https://suggest.taobao.com/sug?code=utf-8&_ksTS=1587265829751_716&callback=jsonp717&k=1&area=c2c&bucketid=13&q='+encodeURIComponent($.trim(input.val()))
// $.ajax({
// url:url,
// dataType:'jsonp'
// }).done(function(data){
// console.log(data)
// var html=''
// var maxNum=10
// var dataLength=data['result'].length;
// if(dataLength===0){
// layer.hide().html('')
// return
// }
// for(var i=0;i<dataLength;i++){
// if(i>=maxNum) return
// html+='<li class="search-layer-item">'+data['result'][i][0]+'</li>'
// }
// layer.html(html).show()
// }).fail(function(){
// console.log('error')
// layer.hide().html('')
// }).always(function(){
// console.log('always')
// })
// })
// input.on('focus',function(){
// layer.show()
// }).on('click',function(){
// return false
// })
// $(document).on('click',function(){
// layer.hide()
// })
// layer.on('click','.search-layer-item',function(){
// // input.val($(this).html())
// input.val($(this).text())
// form.submit()
// })
// })(jQuery)
(function($){
var transitionend=window.mt.transition;
function init($elem,hiddenCallback){
if($elem.is(':hidden')){
$elem.data('status','hidden')
if(typeof hiddenCallback==='function') hiddenCallback();
// $elem.addClass('fadeOut')
}else{
$elem.data('status','shown')
}
}
function show($elem,callback){
if($elem.data('status')==='show') return
if($elem.data('status')==='shown') return
$elem.data('status','show').trigger('show')
callback();
}
function hide($elem,callback){
if($elem.data('status')==='hide') return
if($elem.data('status')==='hidden') return
$elem.data('status','hide').trigger('hide')
callback();
}
var silent={
init:init,
show:function($elem){
show($elem,function(){
$elem.show()
$elem.data('status','shown').trigger('shown')
})
},
hide:function($elem){
hide($elem,function(){
$elem.hide()
$elem.data('status','hidden').trigger('hidden')
})
}
}
var css3={
fade:{
init:function($elem){
$elem.addClass('transition')
init($elem,function(){
$elem.addClass('fadeOut')
})
},
show:function($elem){
show($elem,function(){
$elem.off(transitionend.end).one(transitionend.end,function(){
$elem.data('status','shown').trigger('shown')
})
$elem.show()
setTimeout(function(){
$elem.removeClass('fadeOut')
},20)
})
},
hide:function($elem){
hide($elem,function(){
$elem.off(transitionend.end).one(transitionend.end,function(){
$elem.data('status','hidden').trigger('hidden')
$elem.hide()
})
$elem.addClass('fadeOut')
})
}
},
slideUpDown:{
init:function($elem){
$elem.height($elem.height())
$elem.addClass("transition")
init($elem,function(){
$elem.addClass('slideUpDownCollapse')
})
},
show:function($elem){
show($elem,function(){
$elem.show()
$elem.off(transitionend.end).one(transitionend.end,function(){
$elem.data('status','shown').trigger('shown')
})
setTimeout(function(){
$elem.removeClass('slideUpDownCollapse')
},20)
})
},
hide:function($elem){
hide($elem,function(){
$elem.off(transitionend.end).one(transitionend.end,function(){
$elem.data('status','hidden').trigger('hidden')
$elem.hide();
})
$elem.addClass('slideUpDownCollapse')
})
}
},
slideLeftRight:{
init:function($elem){
$elem.width($elem.width())
$elem.addClass('transition')
if($elem.is(':hidden')){
$elem.data('status','hidden')
$elem.addClass('slideLeftRightCollapse')
}else{
$elem.data('status','shown')
}
},
show:function($elem){
if($elem.data('status')==='show') return
if($elem.data('status')==='shown') return
$elem.data('status','show').trigger('show')
$elem.show()
$elem.off(transitionend.end).one(transitionend.end,function(){
$elem.data('status','shown').trigger('shown')
})
setTimeout(function(){
$elem.removeClass('slideLeftRightCollapse')
},20)
},
hide:function($elem){
if($elem.data('status')==='hide') return
if($elem.data('status')==='hidden') return
$elem.data('status','hide').trigger('hide')
$elem.off(transitionend.end).one(transitionend.end,function(){
$elem.hide()
$elem.data('status','hidden').trigger('hidden')
})
$elem.addClass('slideLeftRightCollapse')
}
},
fadeSlideUpDown:{
init:function($elem){
$elem.height($elem.height());
$elem.addClass('transition')
if($elem.is(':hidden')){
$elem.data('status','hidden')
$elem.addClass('fadeOut')
$elem.addClass('slideUpDownCollapse')
}else{
$elem.data('status','shown')
}
},
show:function($elem){
if($elem.data('status')==='show') return
if($elem.data('status')==='shown') return
$elem.data('status','show').trigger('show')
$elem.show()
$elem.off(transitionend.end).one(transitionend.end,function(){
$elem.data('status','shown').trigger('shown')
})
setTimeout(function(){
$elem.removeClass('fadeOut')
$elem.removeClass('slideUpDownCollapse')
},20)
},
hide:function($elem){
if($elem.data('status')==='hide') return
if($elem.data('status')==='hidden') return
$elem.data('status','hide').trigger('hide')
$elem.off(transitionend.end).one(transitionend.end,function(){
$elem.data('status','hidden').trigger('hidden')
$elem.hide()
})
$elem.addClass('fadeOut')
$elem.addClass('slideUpDownCollapse')
}
},
fadeSlideLeftRight:{
init:function($elem){
$elem.width($elem.width())
$elem.addClass("transition")
if($elem.is(':hidden')){
$elem.data('status','hidden')
$elem.addClass('fadeOut')
$elem.addClass('slideLeftRightCollapse')
}else{
$elem.data('status','shown')
}
},
show:function($elem){
if($elem.data('status')==='show') return
if($elem.data('status')==='shown') return
$elem.data('status','show').trigger('show')
$elem.show();
$elem.off(transitionend.end).one(transitionend.end,function(){
$elem.data('status','shown').trigger('shown')
})
setTimeout(function(){
$elem.removeClass('fadeOut')
$elem.removeClass('slideLeftRightCollapse')
},20)
},
hide:function($elem){
if($elem.data('status')==='hide') return
if($elem.data('status')==='hidden') return
$elem.data('status','hide').trigger('hide')
$elem.off(transitionend.end).one(transitionend.end,function(){
$elem.data('status','hidden').trigger('hidden')
$elem.hide();
})
$elem.addClass('fadeOut')
$elem.addClass('slideLeftRightCollapse')
}
}
}
var js={
fade:{
init:function($elem){
$elem.removeClass('transition')
if($elem.is(':hidden')){
$elem.data('status','hidden')
}else{
$elem.data('status','shown')
}
},
show:function($elem){
if($elem.data('status')==='show')return
if($elem.data('status')==='shown')return
$elem.data('status','show').trigger('show')
$elem.stop().fadeIn(function(){
$elem.data('status','shown').trigger('shown')
})
},
hide:function($elem){
if($elem.data('status')==='hide')return
if($elem.data('status')==='hidden')return
$elem.data('status','hide').trigger('hide')
$elem.stop().fadeOut(function(){
$elem.data('status','hidden').trigger('hidden')
})
}
},
slideUpDown:{
init:function($elem){
$elem.removeClass('transition')
if($elem.is(':hidden')){
$elem.data('status','hidden')
}else{
$elem.data('status','shown')
}
},
show:function($elem){
if($elem.data('status')==='show') return
if($elem.data('status')==='shown') return
$elem.data('status','show').trigger('show')
$elem.stop().slideDown(function(){
$elem.data('status','shown').trigger('shown')
})
},
hide:function($elem){
if($elem.data('status')==='hide') return
if($elem.data('status')==='hidden') return
$elem.data('status','hide').trigger('hide')
$elem.stop().slideUp(function(){
$elem.data('status','hidden').trigger('hidden')
})
}
},
SlideLeftRight:{
init:function($elem){
$elem.removeClass('transition')
var styles={}
styles['width']=$elem.css('width')
styles['padding-left']=$elem.css('padding-left')
styles['padding-right']=$elem.css('padding-right')
$elem.data('styles',styles)
if($elem.is(':hidden')){
$elem.data('status','hidden')
$elem.css({
'width':0,
'padding-left':0,
'padding-right':0
})
}else{
$elem.data('status','shown')
}
},
show:function($elem){
var styles=$elem.data('styles')
if($elem.data('status')==='show') return
if($elem.data('status')==='shown') return
$elem.data('status','show').trigger('show')
$elem.show()
$elem.stop().animate({
'width':styles['width'],
'padding-left':styles['padding-left'],
'padding-right':styles['padding-right']
},function(){
$elem.data('status','shown').trigger('shown')
})
},
hide:function($elem){
if($elem.data('status')==='hide') return
if($elem.data('status')==='hidden') return
$elem.data('status','hide').trigger('hide')
$elem.stop().animate({
'width':0,
'padding-left':0,
'padding-right':0
},function(){
$elem.hide()
$elem.data('status','hidden').trigger('hidden')
})
}
},
fadeSlideUpDown:{
init:function($elem){
$elem.removeClass('transition')
var styles={}
styles['height']=$elem.css('height')
styles['padding-top']=$elem.css('padding-top')
styles['padding-bottom']=$elem.css('padding-bottom')
styles['opacity']=$elem.css('opacity')
$elem.data('styles',styles)
if($elem.is(':hidden')){
$elem.data('status','hidden')
$elem.css({
'height':0,
'padding-top':0,
'padding-bottom':0,
'opacity':0
})
}else{
$elem.data('status','shown')
}
},
show:function($elem){
var styles=$elem.data('styles')
if($elem.data('status')==='show') return
if($elem.data('status')==='shown') return
$elem.data('status','show').trigger('show')
$elem.show()
$elem.animate({
'height':styles['height'],
'padding-top':styles['padding-top'],
'padding-bottom':styles['padding-bottom'],
'opacity':styles['opacity']
},function(){
$elem.data('status','shown').trigger('shown')
})
},
hide:function($elem){
if($elem.data('status')==='hide') return
if($elem.data('status')==='hidden') return
$elem.data('status','hide').trigger('hide')
$elem.animate({
'height':0,
'padding-top':0,
'padding-bottom':0,
'opacity':0
},function(){
$elem.data('status','hidden').trigger('hidden')
$elem.hide()
})
}
}
}
var defaults={
css:false,
js:false,
animation:'fade'
}
function showHide($elem,options){
options=$.extend({},defaults,options);
var mode={}
if(options.css3&&transitionend.isSupport){
mode=css3[options.animation]||css3[defaults.animation]
}else if(options.js){
mode=js[options.animation]||js[defaults.animation]
}else{
mode=silent
}
mode.init($elem)
return{
show:$.proxy(mode.show,this,$elem),
hide:$.proxy(mode.hide,this,$elem)
}
}
$.fn.extend({
showHide:function(option){
return this.each(function(){
var $this=$(this)
var mode=$this.data('showHide')
if(!mode){
$this.data('showHide',mode=showHide($this,typeof option==="object"&&option))
}
if(typeof mode[option]==='function'){
mode[option]();
}
})
}
})
window.mt=window.mt||{}
window.mt.showHide=showHide
})(jQuery)
(function(){
var transitionEndEventName={
transition:'transitionend',
MozTransition:'transitionend',
WebkitTransition:'webkitTransitionEnd',
OTransition:'oTransitionEnd'
}
var transitionEnd='',isSupport=false;
for(var name in transitionEndEventName){
if(document.body.style[name]!==undefined){
transitionEnd=transitionEndEventName[name]
isSupport=true;
break;
}
}
window.mt=window.mt||{}
window.mt.transition={
end:transitionEnd,
isSupport:isSupport
}
})()
2回答
-
好帮手慕夭夭
2020-04-20
同学你好，代码中有两个地方拼错单词，如下修改：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0 -
慕粉1905369247
提问者
2020-04-20
0
相似问题
回答 4