9回答

好帮手慕言

2019-11-05

同学你好，问题在dropdown.js文件中。

因为在css中已经设置了样式，所以就不需要再根据内容的宽高重新计算了。

如下修改：

在index.js中也就不需要接收和调用updata函数了。

同学可以修改后再测试下。

如果还有其他问题，为了高效的为同学解答，可以新建一个问题进行提问哦。

如果帮助到了你，欢迎采纳~祝学习愉快~

0

hdward666

h 老师谢谢提醒了我，我知道最后有个更新下拉层高度和宽度的参数，我现在不接收需要更新高宽的函数就行了。

h019-11-05

共1条回复

Edward666

提问者

2019-11-05

transition.js

(function(){
	var transitionEndEventName = {
		transition: 'transitionend',
		MozTransition: 'transitionend',
		WebkitTransition: 'webkitTransitionEnd',
		OTransition: 'oTransitionEnd 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
	};
})();

0

Edward666

提问者

2019-11-05

showHide.js
(function($){
	'use strict'
	var transition = window.mt.transition;
	function init($elem, hiddenCallback){
		if ($elem.is(':hidden')) {//hidden
			$elem.data('status', 'hidden');
			if (typeof hiddenCallback === 'function') hiddenCallback();
		}else{//shown
			$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 = {
		_init:function($elem, className){
			$elem.addClass('transition');
			init($elem, function(){
				$elem.addClass(className);
			});	
		},
		_show:function($elem, className){
			show($elem, function(){
				//每次运行show()方法时都会运行一次on方法绑定事件，on方法可以重复绑定事件。
				$elem.off(transition.end).one(transition.end, function(){
					$elem.data('status', 'shown').trigger('shown');
				})
				$elem.show();
				setTimeout(function(){
					$elem.removeClass(className);
				},20);
			});
		},
		_hide:function($elem, className){
			hide($elem, function(){
				$elem.off(transition.end).one(transition.end, function(){
					$elem.hide();
					$elem.data('status', 'hidden').trigger('hidden');
				});
				$elem.addClass(className);
			});
		},
		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');
			}
		}
	};
	var js = {
		_init:function($elem){
			$elem.removeClass('transition');//防止css的过渡与jQuery的动画方法发生冲突。
			init($elem);
		},
		_customInit:function($elem, options){
			//保存元素原本的属性
			var styles = {};
			for(var name in options){
				styles[name] = $elem.css(name);
			}
			$elem.data('styles', styles);

			$elem.removeClass('transition');//防止css的过渡与jQuery的动画方法发生冲突。
			init($elem, function(){//当元素本来就是被隐藏的话，才会执行的回调函数。
				$elem.css(options);//将被隐藏元素的宽度和内边距设置为0，以方便后面动画。
			});
		},
		_show:function($elem, animation){
			show($elem, function(){
				$elem.stop()[animation](function(){//记住jQuery方法fadeIn，有参数为fadeIn执行完成后运行的函数。
					$elem.data('status', 'shown').trigger('shown');
				});
			});
		},
		_customShow:function($elem){
			show($elem, function(){
				var styles = $elem.data('styles');//此处的styles保存的就是元素本来的css属性。
				$elem.show();
				$elem.stop().animate(styles, function(){//将所有被设置为零的css属性用动画还原！
					$elem.data('status', 'shown').trigger('shown');
				});
			});
		},
		_hide:function($elem, animation){
			hide($elem, function(){
				$elem.stop()[animation](function(){
					$elem.data('status', 'hidden').trigger('hidden');
				});
			});
		},
		_customHide:function($elem, options){
			hide($elem, function(){
				$elem.stop().animate(options, function(){
					$elem.hide();
					$elem.data('status', 'hidden').trigger('hidden');
				});
			});
		},
		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
				});
			},
			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
				});
			},
			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
				});
			}
		}
	};

	var defaults = {
		css3:true,
		js:true,
		animation:'fade'
	};
	function showHide($elem, options){
		var mode = null;
		options = $.extend({}, defaults, options);

		if (options.css3 && transition.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),//$.proxy()方法可以给还没有调用的函数传参。
			hide:$.proxy(mode.hide, this, $elem)
		}
	}
	// window.mt = window.mt || {};
	// window.mt.showHide = showHide;
	
	//使用给jQuery对象添加方法的方式暴露接口
	$.fn.extend({
		showHide:function(option){
			return this.each(function(){
				var $this = $(this),
					mode = $this.data('showHide');
				if (!mode) {
					//当option不是对象的时候,showHide()函数的第二个参数将会返回false，
					//放弃options参数，使用showHide函数的默认参数defaults
					$this.data('showHide', mode = showHide($this, typeof option === 'object' && option));
				}
				if (typeof mode[option] === 'function') {
					mode[option]();
				}
			});
		}
	});
})(jQuery);

0

Edward666

提问者

2019-11-05

search.js
(function($){
	'use strict'

	var cache = {//创建一个对象来实现数据缓存
		data:{},//用来存储数据
		count:0,//储存数据的数量
		addData:function(key, data){//添加数据
			if (!this.data[key]) {
				this.data[key] = data;
				this.count ++;
			}
		},
		readData:function(key){//读取数据
			return this.data[key];
		},
		deleteDataByKey:function(key){//通过数据对象的键来删除数据
			delete this.data[key];
			this.count --;
		},
		deleteDataByOrder:function(num){//通过传入想要删除数据的数量来删除数据
			var count = 0;//记录删除数据的个数，防止多删

			for(var p in this.data){
				if (count >= num) {
					break;
				}
				count ++;
				this.deleteDataByKey(p);
			}
		}
	};

	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.loaded = false;

		this.$elem.on('click', '.search-btn', $.proxy(this.submit, this));
		if (options.autocomplete) {
			this.autocomplete();
		}
	}
	Search.DEFAULTS = {
		autocomplete: true,
		url:'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1572595090793_2199&callback=jsonp2200&k=1&area=c2c&bucketid=10&q=',
		css3:false,
		js:false,
		animation:'fade',
		getDateInterval: 200
	};
	Search.prototype.submit = function(){
		if (this.getInputVal() === '') {
			return false;//返回false可以阻止$btn的默认行为（提交表单）
		}
		this.$form.submit();
	};

	Search.prototype.autocomplete = function(){
		var timer = null,//用来保存定时器
			self = this;

		this.$input
			.on('input', function(){
				
				if (self.options.getDateInterval === 0) {
					self.getData();
				}else{
					clearTimeout(timer);
					setTimeout(function(){//延迟获取数据的时间，以防进行过多的服务器请求
						self.getData();
					}, self.options.getDateInterval)//定时器是默认异步进行的，就算延时为0也会有延迟的
				}
			})

			.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,
			inputVal = this.getInputVal();//获取输入框的内容

		if (inputVal === '') return self.$elem.trigger('search-noData');//如果输入框的内容为空，我们就触发没有获取到数据的消息。
		if (cache.readData(inputVal)) return self.$elem.trigger('search-getData', [cache.readData(inputVal)]);

		if(this.jqXHR) this.jqXHR.abort();//终止上一次没有完成的ajax请求。以防以前的请求结果干扰现在的请求结果。
		
		this.jqXHR = $.ajax({
			url: this.options.url + inputVal,
			dataType:'jsonp',
			timeout:1000  //请求jsonp数据超时后运行调用jsonp失败的函数
		}).done(function(data){//是请求成功后运行的方法和ajax方法传入对象中的success方法效果一样，但是这个是异步的
			cache.addData(inputVal, data);
			self.$elem.trigger('search-getData', [data]);
			console.log(data);
			console.log(cache.data);
			console.log(cache.count);
		}).fail(function(){//请求失败后运行的方法，与对象中的error方法一样
			self.$elem.trigger('search-noData');
		}).always(function(){
			self.jqXHR = null;//运行到这一步说明ajax请求完成。
		});
	};
	Search.prototype.showLayer = function(){
		if (!this.loaded) return;
		this.$layer.showHide('show');
	};
	Search.prototype.hideLayer = function(){
		this.$layer.showHide('hide');
	};

	Search.prototype.appendLayer = function(html){
		this.$layer.html(html);
		this.loaded = !!html;//!!将HTML转换为布尔值
	};
	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));
				}
				if (typeof search[option] === 'function') {
					search[option](value);
				}
			});
		}
	});

})(jQuery);

0

Edward666

提问者

2019-11-05

dropdown.js
(function($){
	'use strict'
	function Dropdown($elem, options){
		this.$elem = $elem;
		this.options = options;
		this.$layer = this.$elem.find('.dropdown-layer');
		this.activeClass = options.active + '-active';
		
		this._init();
	}
	Dropdown.DEFAULTS = {  //在js中，函数就是对象。模拟常量
		event:'hover',
		css3:true,
		js:true,
		animation:'slideUpDown',
		active:'dropdown',
		delay:0
	}
	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, function(){
				self.$layer
				.height('auto').height(self.$layer.height())
				.width('auto').width(self.$layer.width());
			});
		});
		// var self = this;
		// this.$elem.hover(function(){
		// 	self.show();//谁调用show方法，谁就是show方法中的this
		// },function(){
		// 	self.hide();
		// });
		if (this.options.event === 'click') {
			this.$elem.on('click', function(e){
				self.show();
				e.stopPropagation();
			});
			$(document).on('click',$.proxy(this.hide, this)); 
		}else{
			//更加简单的改变事件中this的执行的方法
			this.$elem.hover($.proxy(this.show, this),$.proxy(this.hide, this));
		}
	}
	Dropdown.prototype.show = function(){
		var self = this;
		if (this.options.delay) {
			this.timer = setTimeout(function(){
				self.$elem.addClass(self.activeClass);
				self.$layer.showHide('show');
			},this.options.delay);
		}else{
			this.$elem.addClass(this.activeClass);
			this.$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 $this = $(this),
					dropdown = $this.data('dropdown'),
					options = $.extend({}, Dropdown.DEFAULTS, $this.data(), typeof option === 'object' && option);
				if (!dropdown) {
					$this.data('dropdown', dropdown = new Dropdown($this, options));
				}
				if (typeof dropdown[option] === 'function') {
					dropdown[option]();
				}
			})
		}
	});
})(jQuery);

0

Edward666

提问者

2019-11-05

common.css
/*公共样式*/
	.container{
		width: 1200px;
		margin: 0 auto;
	}
	.link{
		color: #4d555d;
	}
	.link:hover{
		color: #f01414;
	}
	.transition{
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-ms-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
	}
	.text-hidden{
		text-indent: -9999px;
		overflow: hidden;
	}
	.text-ellipsis{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
/*showHide*/
	.fadeOut{
				visibility: hidden !important;
				opacity: 0 !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;
	}
/*iconfont公共样式*/
	@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;
	}
/*dropdown公共样式*/
	.dropdown{
		position: relative;
	}
	.dropdown-toggle{
		position: relative;
		z-index: 4;
	}
	.dropdown-arrow{
		display: inline-block;
		vertical-align: middle;
		line-height: normal;
	}
	.dropdown-layer{
		display: none;
		overflow: hidden;
		position: absolute;
		z-index: 3;
	}
	.dropdown-left{
		left: 0;
		right: auto;
	}
	.dropdown-right{
		right: 0;
		left: auto;
	}
	.dropdown-loading{
		width: 32px;
		height: 32px;
		margin: 20px;
		background: url(../img/loading.gif) no-repeat;
		background-position: center;
	}
/*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{
		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{
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		transform: rotate(180deg);
	}

/*search*/
	.search{
		position: relative;
		border: 1px solid #cfd2d5;
	}
	.search-inputbox{
		width: 585px;
		height: 40px;
		line-height: 40px;
		padding: 0 10px;
		border: none;
		background-color: #fff;
	}
	.search-btn{
		width: 73px;
		height: 40px;
		line-height: 40px;
		border: none;
		background-color: #07111b;
		font-size: 14px;
		text-align: center;
		color: #fff;
		cursor: pointer;
	}
	.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;
	}
	.search-layer-item:hover{
		background-color: #f3f5f7;
	}

0

好帮手慕言

2019-11-05

同学你好，因为同学提供的代码并不全，所以没有提供的代码使用的是课程源码，测试结果如下：

同学可以下载源码，进行对比测试，看是不是其他文件有书写错误。源码下载请参考下方：

如果排查不出来的话，可以新建问题，把全部的代码粘贴到问题区，老师帮助排查。

如果帮助到了你，欢迎采纳~祝学习愉快~

0

hdward666

h 老师，现在代码应该粘贴齐了，购物车下拉菜单的图片我放在img/cart文件夹下的

h019-11-05

共1条回复

Edward666

提问者

2019-11-05

我给dropdown-layer设置了宽度的，但是获取数据之后，宽度就是成这样了。

0

好帮手慕言

2019-11-05

同学你好，关于同学的疑问，解答如下：

1、关于背景图片的位置。同学没有提供这部分的代码，可以参考如下

2、关于第二个问题，可以再详细描述下哦。比如截图说明，老师帮助解答~

祝学习愉快~

0

hdward666

h 截图了，我给下拉成设置了宽度的，为什么最后高度更新的时候不是我设置的高度？

h019-11-05

共1条回复