体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

自动完成不显示.

来源：3-2 改写搜索框功能--自动完成

慕言_7946275

2019-10-13 15:05:00

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>慕淘网</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
</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:;" target="_blank" class="nav-site-mobile link">手机逛慕淘</a></li>
</ul>

<ul class="fr">
<li class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">我的慕淘<i class="dropdown-arrow icon transition">&#xe609;</i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
</ul>
</li>

<li class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow icon transition">&#xe609;</i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">收藏的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">收藏的店铺</a></li>
</ul>
</li>

<li class="fl">
<a href="###" target="_blank" class="nav-site-category link transition">商品分类</a>
</li>

<li class="menu dropdown fl" data-active="menu" data-load="js/dropdown-seller.json">
<a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow icon transition">&#xe609;</i></a>
<ul class="dropdown-layer dropdown-left">
<li class="dropdown-loading"></li>
<!-- <li><a href="###" target="_blank" class="menu-item">免费开店</a></li>
<li><a href="###" target="_blank" class="menu-item">已卖出的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">出售中的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家服务市场</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家培训中心</a></li>
<li><a href="###" target="_blank" class="menu-item">体验中心</a></li> -->
</ul>
</li>

<li class="menu nav-site-service dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow icon transition">&#xe609;</i></a>
<ul class="dropdown-layer dropdown-right">
<li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
</ul>
</li>


</ul> <!-- class="fr" -->
</div>
</div>

<div class="header">
<div class="container">
<h1 class="fl"><a href="./index.html" class="header-logo text-hidden">慕淘网</a></h1>
<div id="header-search" class="search fl">
<form action="https://s.taobao.com/search" class="search-form">
<input type="text" name="q" placeholder="双十一红包雨" autocomplete="off" class="search-inputbox fl"/>
<input type="submit" value="搜索" class="search-btn fl"/>
</form>
<ul class="search-layer">
<li class="search-layer-item text-ellipsis">111</li>
<li class="search-layer-item">111</li>
<li class="search-layer-item">111</li>
</ul>
</div>
<div class="cart fr"></div>
</div>
</div>



<!-- <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> -->
<script>
window.jQuery||document.write('<script type="text/javascript" src="js/jquery.js"><\/script>');
</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>
//search.js

// (function($){
	// 	'use strict';

	// 	var $search=$('.search'),
	// 		$form=$('.search-form'),
	// 		$input=$search.find('.search-inputbox'),
	// 		$btn=$search.find('.search-btn'),
	// 		$layer=$search.find('.search-layer');

	// 	//验证
	// 	$form.on('submit',function(){
	// 		if($.trim($input.val())===""){
	// 			return false;
	// 		}
	// 	})

	// 	//自动完成
	// 	$input.on('input',function(){
	// 		var url='https://suggest.taobao.com/sug?code=utf-8&_ksTS=1570799267732_420&callback=jsonp421&k=1&area=c2c&bucketid=8&q='+encodeURIComponent($.trim($input.val()));

	// 		$.ajax({
	// 			url:url,
	// 			dataType:'jsonp'
	// 		}).done(function(data){
	// 			console.log(data);
	// 			var html='',
	// 				dataNum=data['result'].length,
	// 				maxNum=10;

	// 			if(dataNum===0){
	// 				$layer.hide().html('');
	// 				return;
	// 			}

	// 			for(var i=0;i<data['result'].length;i++){
	// 				if(i>=maxNum) break;
	// 				html+='<li class="search-layer-item text-ellipsis">'+data['result'][i][0]+'</li>';
	// 			}
	// 			$layer.html(html).show();
				

	// 		}).fail(function(){
	// 			$layer.hide().html('');
	// 		}).always(function(){
	// 			console.log('why always me!');
	// 		}); //异步,避免回调
			
	// 	}); 

	// 	$layer.on('click','.search-layer-item',function(){
	// 		$input.val(removeHtmlTags($(this).html()));
	// 		$form.submit();
	// 	});//冒泡,事件代理,给父元素绑定事件,下面的子元素都可以响应

	// 	$input.on('focus',function(){
	// 		$layer.show();
	// 	}).on('click',function(){
	// 		return false;//阻止冒泡
	// 	});
	// 	$(document).on('click',function(){
	// 		$layer.hide();
	// 	})

	// 	function removeHtmlTags(str){
	// 		return str.replace(/<(?:[^'">]|"[^"]*"|'[^']*')*>/g,'');
	// 	}

	// })(jQuery);

//改写搜索框验证
(function($){
	'use strict';
	function Search($elem,options){
		this.$elem=$elem;
		this.options=options;

		this.$form=this.$elem.find('.search-form');
		this.$input=this.$elem.find('.search-inputbox');
		
		this.$layer=this.$elem.find('.search-layer');

		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=1570799267732_420&callback=jsonp421&k=1&area=c2c&bucketid=8&q=',
		css3:false,
		js:false,
		animation:'fade'

	};
	Search.prototype.submit=function(){
		if(this.getInputVal()===''){
			return false;
		}
		this.$form.submit();
	};
	Search.prototype.autocomplete=function(){
		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;
		console.log(this.options.url+this.getInputVal());
		$.ajax({
			url:this.options.url+this.getInputVal(),
			dataType:'jsonp'
		}).done(function(data){
			self.$elem.trigger('search-getData',[data,self.$layer]);
		}).fail(function(){
			self.$elem.trigger('search-noData',[self.$layer]);
		}).always(function(){

		});
	};
	Search.prototype.showLayer=function(){
		if(this.$layer.children().length===0) return;
		this.$layer.showHide('show');
	};
	Search.prototype.hideLayer=function(){
		this.$layer.showHide('hide');
	};
	Search.prototype.getInputVal=function(){
		return $.trim(this.$input.val());
	};
	Search.prototype.setInputVal=function(val){
		this.$input.val(removeHtmlTags(val));

		function removeHtmlTags(str){
			return str.replace(/<(?:[^'">]|"[^"]*"|'[^']*')*>/g,'');
		}
	};


	$.fn.extend({
		search:function(option,value){
			return this.each(function(){
				var $this=$(this),
				    search=$this.data('search'),
				    options=$.extend({},Search.DEFAULTS,$(this).data(),typeof option==='object' && option);
				if(!search){
					$this.data('search',search=new Search($this,options));
				}
				
				// var dropdown=new Dropdown(this,options);
				if(typeof search[option]==='function'){
					search[option](value);
				}
			});
		}
	});

})(jQuery);
//index.js

(function($){ //模块化
	'use strict';
	//menu
	$('.dropdown').on('dropdown-show',function(e){
		var $this=$(this),
			dataLoad=$this.data('load');

		if(!dataLoad) return;
		    

		
		if(!$this.data('loaded')){
			var $layer=$this.find('.dropdown-layer'),
				html='';

			$.getJSON(dataLoad,function(data){
				// console.log(data);
				//setTimeout(function(){
					for(var i=0;i<data.length;i++){
						html+='<li><a href="'+data[i].url+'" target="_blank" class="menu-item">'+data[i].name+'</a></li>'
					}
					$layer.html(html);
					$this.data('loaded',true);
				//},1000);
			});
		}
	});

	$('.dropdown').dropdown({
		// event:'hover',
		css3:true,
		js:false
		// animation:'slideUpDown',
		// delay:0
	});

	//header search
	var $headerSearch=$('#header-search');
	var html='',
		maxNum=10;
	$headerSearch.on('search-getData',function(e,data,$layer){
			var $this=$(this);
			html=createHeaderSearchLayer(data,maxNum);
			$layer.html(html);
			if(html){
				$this.search('showLayer');
			}else{
				$this.search('hideLayer');
			}
	}).on('search-noData',function(e,$layer){
		$(this).search('hideLayer');
		$layer.html('');
	}).on('click','.search-layer-item',function(){
		$headerSearch.search('setInputVal',$(this).html());
		$headerSearch.search('submit');
	});
	$headerSearch.search({
		autocomplete:true,
		css3:false,
		js:false,
		animation:'fade'

	});



	function createHeaderSearchLayer(data,maxNum){
		var html='',
			dataNum=data['result'].length;
		if(dataNum===0){
			return '';
		}

		for(var i=0;i<dataNum;i++){
			if(i>=maxNum) break;
			html+='<li class="search-layer-item text-ellipsis">'+data['result'][i][0]+'</li>';
		}
		return html;
	}


})(jQuery);
(function($){ //模块化
	'use strict';
	//menu
	$('.dropdown').on('dropdown-show',function(e){
		var $this=$(this),
			dataLoad=$this.data('load');

		if(!dataLoad) return;
		    

		
		if(!$this.data('loaded')){
			var $layer=$this.find('.dropdown-layer'),
				html='';

			$.getJSON(dataLoad,function(data){
				// console.log(data);
				//setTimeout(function(){
					for(var i=0;i<data.length;i++){
						html+='<li><a href="'+data[i].url+'" target="_blank" class="menu-item">'+data[i].name+'</a></li>'
					}
					$layer.html(html);
					$this.data('loaded',true);
				//},1000);
			});
		}
	});

	$('.dropdown').dropdown({
		// event:'hover',
		css3:true,
		js:false
		// animation:'slideUpDown',
		// delay:0
	});

	//header search
	var $headerSearch=$('#header-search');
	var html='',
		maxNum=10;
	$headerSearch.on('search-getData',function(e,data,$layer){
			var $this=$(this);
			html=createHeaderSearchLayer(data,maxNum);
			$layer.html(html);
			if(html){
				$this.search('showLayer');
			}else{
				$this.search('hideLayer');
			}
	}).on('search-noData',function(e,$layer){
		$(this).search('hideLayer');
		$layer.html('');
	}).on('click','.search-layer-item',function(){
		$headerSearch.search('setInputVal',$(this).html());
		$headerSearch.search('submit');
	});
	$headerSearch.search({
		autocomplete:true,
		css3:false,
		js:false,
		animation:'fade'

	});



	function createHeaderSearchLayer(data,maxNum){
		var html='',
			dataNum=data['result'].length;
		if(dataNum===0){
			return '';
		}

		for(var i=0;i<dataNum;i++){
			if(i>=maxNum) break;
			html+='<li class="search-layer-item text-ellipsis">'+data['result'][i][0]+'</li>';
		}
		return html;
	}


})(jQuery);
/*nav-site*/  
	.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;
		margin-left: 15px;
	}
	.nav-site-signup,
	.nav-site-mobile{
		margin-left: 10px;
	}

	.nav-site-category{
		margin:0 10px;
	}

	.nav-site-service{
		margin-right:15px;
	}

	/*dropdown*/
	.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;*/
		/*background:url("../img/dropdown-arrow.png") no-repeat;*/
		margin-left: 8px;
		vertical-align: middle;
	}
	.dropdown-layer{
		z-index:1;
		display: none;
		position: absolute;
		top:43px;
		background-color: #fff;
		border:1px solid #cdd0d4;
	}
	.dropdown-left{
		left:0;
		right:auto;
	}
	.dropdown-right{
		right:0;
		left:auto;
	}
	.dropdown-item{
		display: block;
		height:30px;
		line-height: 30px;
		padding:0 12px;
		color:#4d555d;
		white-space: nowrap;
	}
	.dropdown-item:hover{
		background-color: #f3f5f7;
	}
	/*.dropdown-active .dropdown-toggle{
		background-color: #fff;
		border:1px solid #cdd0d4;
	}
	.dropdown-active .dropdown-arrow{
		background: url("../img/dropdown-arrow-active.png");
	}
	.dropdown-active .dropdown-layer{
		display: block;
	}*/  /*方法2:nav-site鼠标移入移出效果;*/

	/*.dropdown-active .dropdown-toggle,*/
	.dropdown:hover .dropdown-toggle{
		background-color: #fff;
		border-color:#cdd0d4;
	}
	/*.dropdown-active .dropdown-arrow,*/
	.dropdown:hover .dropdown-arrow{
		/*background: url("../img/dropdown-arrow-active.png");*/
	}
	/*.dropdown-active .dropdown-layer,*/
	.dropdown:hover .dropdown-layer{
		display: block;
	} /*方法3:nav-site鼠标移入移出效果;*/

/*header*/
.header{
	width: 100%;
	height:124px;
	background-color:#f3f5f7;

}
.header-logo,
.header .search,
.header .cart{
	margin-top:36px;
}
.header-logo{
	display: block;
	width: 134px;
	height: 48px;
	background:url(../img/header-logo.png) no-repeat;
	margin-right:15px;
}
.header .search{
	margin-left:145px;
}
/*common.js 公共样式*/
	.container{
		width: 1200px;
		margin:0 auto;
	}
	.link{
		color: #4d555d;
	}
	.link:hover{
		color:#f01414;
	}
	
	.text-hidden{
		text-indent: -9999px;
		overflow: hidden;
	}

	.text-ellipsis{
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

/*showHide*/
	.fadeOut{
		opacity: 0 !important;
		visibility: hidden !important;
	}
	.slideUpDownCollapse{
		height:0 !important;
		padding-top:0 !important;
		padding-bottom: 0 !important;
	}

	.slideLeftRightCollapse{
		width:0 !important;
		padding-left:0 !important;
		padding-right: 0 !important;
	}

/*dropdown共性*/ 
		.dropdown{
			position: relative;
		}
		.dropdown-toggle{
			position: relative;
			z-index: 2;
		}
		.dropdown-arrow{
			display: inline-block;
			line-height: 1;   /*避免继承container行高44*/
			/*background-repeat: no-repeat;*/
			vertical-align: middle;
		}
		.dropdown-layer{
			z-index:1;
			display: none;
			position: absolute;
		}
		.dropdown-left{
			left:0;
			right:auto;
		}
		.dropdown-right{
			right:0;
			left:auto;
		}

/*menu dropdown*/
		.menu .dropdown-toggle{
			display: block;
			height: 100%;
			padding:0 13px 0 12px;
			border-left:1px solid #f3f5f7;
			border-right: 1px solid #f3f5f7;
		}
		.menu .dropdown-arrow{
			/*width: 8px;
			height: 6px;*/
			/*background-image:url("../img/dropdown-arrow.png") ;*/
			margin-left: 5px;
		}
		.menu .dropdown-layer{
			top:43px;
			background-color: #fff;
			border:1px solid #cdd0d4;
		}
		.menu-item{
			display: block;
			height:30px;
			line-height: 30px;
			padding:0 12px;
			color:#4d555d;
			white-space: nowrap;
		}
		.menu-item:hover{
			background-color: #f3f5f7;
		}

		.menu-active .dropdown-toggle{
			background-color: #fff;
			border-color: #cdd0d4;
		}
		.menu-active .dropdown-arrow{
			/*background-image: url("../img/dropdown-arrow-active.png");*/
		}
	


		@font-face {
					font-family: "iconfont";
					src: url('../test/font/iconfont.eot?t=1477124206'); /* IE9*/
					src: url('../test/font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */
					url('../test/font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */
					url('../test/font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
					url('../test/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;
				} 
				/*.menu-active .dropdown-arrow{
					-o-transform: rotate(180deg);
					-ms-transform: rotate(180deg);
					-moz-transform: rotate(180deg);
					-webkit-transform: rotate(180deg);
					transform: rotate(180deg);
				}*/
				[class*="-active"] .dropdown-arrow{
					-o-transform: rotate(180deg);
					-ms-transform: rotate(180deg);
					-moz-transform: rotate(180deg);
					-webkit-transform: rotate(180deg);
					transform: rotate(180deg);
				}

				.dropdown-loading{
					width: 32px;
					height: 32px;
					background:url('../img/loading.gif') no-repeat;
					margin:20px;
				}

				.transition{
					-o-transition: all 0.5s;
					-ms-transition: all 0.5s;
					-moz-transition: all 0.5s;
					-webkit-transition: all 0.5s;
					transition: all  0.5s;
				}

/*search*/
	.search{ /*父容器宽高由内容撑开*/
		position: relative;
		border:1px solid #cfd2d5;
	}
	.search-inputbox{
		width:585px;
		height:40px;
		line-height: 40px;
		padding:0 10px;
		background-color: #fff;
		border:none;
	}
	.search-btn{
		width: 73px;
		height: 40px;
		line-height: 40px;
		background-color: #07111b;
		font-size:14px;
		color:#fff;
		border:none;
		text-align: center;
		cursor: pointer;
	}
	.search-layer{
		display: none;
		position: absolute;
		top:100%; /*相对于父容器多高*/
		left:-1px;
		width: 100%;
		background-color: #fff;
		border:1px solid #cfd2d5;

	}
	.search-layer-item{
		height: 24px;
		line-height: 24px;
		padding: 0 10px;
		cursor: pointer;

		/*text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;*/  
	}

	.search-layer-item:hover{
		background-color: #f3f5f7;
	}				
[
	{
		"url":"###",
		"name":"免费开店"
	},
	{
		"url":"###",
		"name":"已卖出的宝贝"
	},
	{
		"url":"###",
		"name":"出售中的宝贝"
	},
	{
		"url":"###",
		"name":"卖家服务市场"
	},
	{
		"url":"###",
		"name":"卖家培训中心"
	},
	{
		"url":"###",
		"name":"体验中心"
	}


]
(function($){
	'use strict';

	var transition=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){
					css3._init($elem,'fadeOut');
					
				},
				show:function($elem){
					css3._show($elem,'fadeOut');
				},
				hide:function($elem){
					css3._hide($elem,'fadeOut');
					
				}

			}, //淡入淡出
			slideUpDown:{
				init:function($elem){
					$elem.height($elem.height());
					css3._init($elem,'slideUpDownCollapse');
				},
				show:function($elem){
					css3._show($elem,'slideUpDownCollapse');

				},
				hide:function($elem){
					css3._hide($elem,'slideUpDownCollapse');
				}

			},//卷帘门效果
			slideLeftRight:{
				init:function($elem){
					$elem.width($elem.width());
					css3._init($elem,'slideLeftRightCollapse');
				},
				show:function($elem){
					css3._show($elem,'slideLeftRightCollapse');

				},
				hide:function($elem){
					css3._hide($elem,'slideLeftRightCollapse');
				}

			},
			fadeSlideUpDown:{
				init:function($elem){
					$elem.height($elem.height());
					css3._init($elem,'fadeOut slideUpDownCollapse');
				},
				show:function($elem){
					css3._show($elem,'fadeOut slideUpDownCollapse');

				},
				hide:function($elem){
					css3._hide($elem,'fadeOut slideUpDownCollapse');
				}

			},
			fadeSlideLeftRight:{
				init:function($elem){
					$elem.width($elem.width());
					css3._init($elem,'fadeOut slideLeftRightCollapse');
				},
				show:function($elem){
					css3._show($elem,'fadeOut slideLeftRightCollapse');

				},
				hide:function($elem){
					css3._hide($elem,'fadeOut slideLeftRightCollapse');
				}

			}

	};
	css3._init=function($elem,className){
			$elem.addClass('transition');
			init($elem,function(){
				$elem.addClass(className);
			});
		
	};

	css3._show=function($elem,className){
			show($elem,function(){
				$elem.off(transition.end).one(transition.end,function(){
				$elem.data('status','shown').trigger('shown');
			});
			$elem.show();
			setTimeout(function(){
				$elem.removeClass(className);
			},20);
		  });
	};

	css3._hide=function($elem,className){
			hide($elem,function(){
				$elem.off(transition.end).one(transition.end,function(){
					$elem.hide();
					$elem.data('status','hidden').trigger('hidden');
				});
				setTimeout(function(){
					$elem.addClass(className);
				},20);
			});
	};

	var js={
		fade:{
				init:function($elem){
					js._init($elem);
				},
				show:function($elem){
					js._show($elem,'fadeIn');

				},
				hide:function($elem){
					js._hide($elem,'fadeOut');
				}
			},
		slideUpDown:{
				init:function($elem){
					js._init($elem);
				},
				show:function($elem){
					js._show($elem,'slideDown');

				},
				hide:function($elem){
					js._hide($elem,'slideUp');
				}
			},

		slideLeftRight:{
				init:function($elem){
					js._customInit($elem,{
						'width':0,
						'padding-left':0,
						'padding-right':0
					});
					// 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);


					// $elem.removeClass('transition');
					// init($elem,function(){
					// 	$elem.css({
					// 		'width':0,
					// 		'padding-left':0,
					// 		'padding-right':0
					// 	});
					// });
				},
				show:function($elem){
					js._customShow($elem);

				},
				hide:function($elem){
					js._customHide($elem,{
						'width':0,
						'padding-left':0,
						'padding-right':0
					});
					
				}
			},

		fadeSlideUpDown:{
				init:function($elem){
					js._customInit($elem,{
						'opacity':0,
						'height':0,
						'padding-top':0,
						'padding-bottom':0
					});
					// var styles={};
					// styles['opacity']=$elem.css('opacity');
					// styles['height']=$elem.css('height');
					// styles['padding-top']=$elem.css('padding-top');
					// styles['padding-bottom']=$elem.css('padding-bottom');
					// $elem.data('styles',styles);


					// $elem.removeClass('transition');
					// init($elem,function(){
					// 	$elem.css({
					// 		'opacity':0,
					// 		'height':0,
					// 		'padding-top':0,
					// 		'padding-bottom':0
					// 	});
					// });
				},
				show:function($elem){
					js._customShow($elem);

				},
				hide:function($elem){
					js._customHide($elem,{
						'opacity':0,
						'height':0,
						'padding-top':0,
						'padding-bottom':0
					})
					
				}
			},

		fadeSlideLeftRight:{
				init:function($elem){
					js._customInit($elem,{
						'opacity':0,
						'width':0,
						'padding-left':0,
						'padding-right':0
					});
				},
				show:function($elem){
					js._customShow($elem);
				},
				hide:function($elem){
					js._customHide($elem,{
						'opacity':0,
						'width':0,
						'padding-left':0,
						'padding-right':0
					});
				}
			}
	};
	js._init=function($elem,hiddenCallback){
		$elem.removeClass('transition');
		init($elem,hiddenCallback);
	};

	js._customInit=function($elem,options){
		var styles={};

		for(var p in options){
			styles[p]=$elem.css(p);
		}
		$elem.data('styles',styles);
		js._init($elem,function(){
			$elem.css(options);
		});
	};

	js._show=function($elem,mode){
		show($elem,function(){
			$elem.stop()[mode](function(){
				$elem.data('status','shown').trigger('shown');
			});
		});
	};
	js._customShow=function($elem){
		show($elem,function(){
			$elem.show();
			$elem.stop().animate($elem.data('styles'),function(){
				$elem.data('status','shown').trigger('shown');
			});
		});

	};
	js._hide=function($elem,mode){
		hide($elem,function(){
			$elem.stop()[mode](function(){
				$elem.data('status','hidden').trigger('hidden');
			});
		});
	};
	js._customHide=function($elem,options){
		hide($elem,function(){
			$elem.stop().animate(options,function(){
				$elem.hide();
				$elem.data('status','hidden').trigger('hidden');
			});
		});
	};


	var defaults={
		css3:false,
		js:false,
		animation:'fade'
	};
	function showHide($elem,options){
		var mode=null;
		
		if(options.css3 && transition.isSupport){
			//css3 transition
			mode=css3[options.animation]||css3[defaults.animation];
			
		}else if(options.js){
			//js animation
			mode=js[options.animation]||js[defaults.animation];
		}else{
			//no animation
			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),
					options=$.extend({},defaults,typeof option==='object' && option),
					mode=$this.data('showHide');
				if(!mode){
					$this.data('showHide',mode=showHide($this,options));
				}
				
				if(typeof mode[option]==='function'){
					mode[option]();
				}
			});
		}
	})
	// window.mt=window.mt||{};
	// window.mt.showHide=showHide;
})(jQuery);


写回答

4回答

好帮手慕慕子

2019-10-13

同学你好， 老师非常能够理解同学的心情，首先，对于同学能够自己解决问题， 老师给你一个大大的赞哦，独立查找解决问题这对我们的编程能力提升也是有一定帮助的

然后， 老师们都是按照同学们提问的事件顺序一一为同学们解答的， 有的问题需要测试代码，查找问题，然后给出详细的解决方案， 这个过程可能需要一定的时间，还望同学能够理解， 老师们一定会在第一时间帮助同学解答问题的。

祝学习愉快~~~~

0

慕言_7946275

提问者

2019-10-13

不用了,好气,等这么久没人回复,找到问题了

0

慕言_7946275

提问者

2019-10-13

老师呢?等着啊

0

慕言_7946275

提问者

2019-10-13

为什么还没解答

0

0 学习 · 14456 问题

查看课程

相似问题

老师请看一下这里的自动完成功能为啥没有实现，谢谢

回答 1

自动完成第一次输入不显示

回答 2

购物车代码封装之前和之后的2个问题，希望老师能看完js代码后从实现效果原理的角度帮我分析下

回答 2

我用淘宝时，输入框有自动提示信息，点提交也是会提交的

回答 2

怎么根据购物车有无商品显示指定div

回答 1

打开慕课网App查看更多内容