老师,问个问题哦

/*html*/

<!DOCTYPE html>

<html>

<head>

<title>下拉菜单封装</title>

/*dropdown公共的*/

body{

background-color: #eee;

}

.dropdown{

position: relative;

}

.dropdown-toggle{

position: relative;

z-index: 2;

}

.dropdown-arrow{

display: inline-block;

/*background-repeat: no-repeat;*/

vertical-align: middle;

}

.dropdown-layer{

display: none;

position: absolute;

z-index: 1;

}

.dropdown-left{

left: 0;

right: auto;

}

.dropdown-right{

right: 0;

left: auto;

}

/*menu dropdown*/

.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{

/*width: 8px;

height: 6px;

background-image: url(img/dropdown-arrow.png);*/

margin-left: 8px;

}

.dropdown-layer{

top: 100%;

background-color: #fff;

overflow: hidden;

border: 1px solid #cdd0d4;

}

.menu-item{

display: block;

height: 30px;

line-height: 30px;

color: #4d555d;

padding: 0 12px;

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);*/

}

.icon-triangle-down{

width: 0;

height: 0;

border: 4px solid #535b62;

border-left-color: transparent;

border-right-color: transparent;

border-bottom: none;

}

.menu-active .icon-triangle-down{

border-top: none;

border-bottom: 4px solid #f11c1c;

}

@font-face {font-family: "iconfont";

src: url('font/iconfont.eot?t=1571101906947'); /* IE9 */

src: url('font/iconfont.eot?t=1571101906947#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANYAAsAAAAABzgAAAMKAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCFIIEATYCJAMMCwgABCAFhG0HQRtVBiMRNmsOMpP9szB2WzQxLiKK4WL5jC/XFS8XBYbV2cfa1E8Vjf1+EQ+Pa+j7Se6K4FoFKCsJBoxqahLRuMkKOTVHmiWQ0N3/OcsI3Gb3XtRkSc6ihztfSD6U0/RgaF0dOLNHp7sIIsJPdDgByGAEQyQaQ/m8CYGz7PNcTm9lCcwPlMuYy/bEo16AcUCBjTUpsgJKkBvGbiJwCMcJNBs0JVYe2/drVIBxgbjuLp3RmLMrLZWhUahrlhbxSqUxPU7vgJf8+/FXEhSSKgNTd19cPW/hh5/wAxsDjlOCYj4vrFVkTKEQJ2v9h2WZnJI1B9oSNlIrQporgqJweait4R8eSRA1UN4KxrRU4gcsTw2pyrsuz6BWSw7hCsDttVWouqupsUg0nRvlZxYHl8Z46SyZuTDATc13I0+e5IXVSwCeVB4A4dvHU37lAtKeXkmyazsAcSS5W072N4Sp9YcqcGv/ZOzsELt6OXpeDW5djF0Nyp7oEbX+7485n5yGZyAXV/39EUZb9RpQB027SXPvlyIIvvM+wQomar3Mb90yLQtIp1uUK/p2zib85H/C1zzd9FDA3P0saFruiB21HBVHy6UPu4ev5THFsmvZjQOYKgwYORMfMQBm67i/X/8bL18eVzJm/jEaYQGfdt1xa9GvFDRK9Fb8aEXPphKqgCMXX47lcSZbVb2GTXMYsgGEu30fb+57mXRo1JciaTCArNEQWThTqLSYRq3RPJpN2rS6RY8bsihNmHBfQei0jqTdG2Sd3pOF8w2Vfv9R6ww8mj3wHYctd87htlehVKnA7B9d3jaMXLoVlS8yY5VKVsV53ySDi2AcRMXMkxqSOWYMPyZRZWRpa3wop1FVtdhJ6ynXwKp2lzDkujcFeVvD1pUgKUUKKPMPOblWg2l7tS19/oUYo0pKWlgD8W9EDFz3KBaIepBPfdOLdS+vDH4YCaUYYqJVQw/FSyqYbKGufpBHcipgR8Q7F6HWivvqg/WN9fftAGALTJvFdDKbzGF/06VV6klOo+24Nrjwd8wtAQAAAA==') format('woff2'),

url('font/iconfont.woff?t=1571101906947') format('woff'),

url('font/iconfont.ttf?t=1571101906947') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */

url('font/iconfont.svg?t=1571101906947#iconfont') format('svg'); /* iOS 4.1- */

}

.icon {

font-family: "iconfont" !important;

font-size: 14px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

[class*="-active"] .dropdown-arrow{

-o-transform: rotate(180deg);

-ms-transform: rotate(180deg);

-moz-transform: rotate(180deg);

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

.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;

}

.fadeOut{

visibility: hidden;

opacity: 0;

}

.slideUpDownCollapse{

height: 0 !important;

padding: 0 !important;

}

.slideLeftRightCollapse{

width: 0 !important;

padding: 0 !important;

}

</style>

</head>

<body>

<li><a href="#" target="_blank" class="menu-item">已买到的宝贝</a></li>

</ul>

</div>

$('.dropdown').dropdown({

css3: true,

js: true,

// animation: 'slideUpDown',

// active: 'menu'

});

</script>

</body>

</html>

/*transition.js*/

(function(){

var transitionEndEventName = {

transition: 'transitionend',

MozTransition: 'transitionend',

WebkitTransition: 'webkitTransitionEnd',

OTransition: 'oTransitionEnd otransitionend'

};

//保存最后获得的transitionend的写法

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

}

})();

/*dropdown.js*/

//自我执行的匿名函数

(function($){

'use strict';

//构造函数

function Dropdown(elem,options){

//保存变量

//this相当于下面的dropdown

this.$elem = $(elem),

this.$layer = this.$elem.find('.dropdown-layer'),

this.activeClass = options.active + '-active';

//showHide的初始化

this.$layer.showHide(this.options);

// var self = this;

// this.$elem.hover(function(){

// self.show();

// },function(){

// self.hide();

// });

this.$elem.hover($.proxy(this.show,this),$.proxy(this.hide,this));

}

Dropdown.DEFAULTS = {

css3: false,

js: false,

animation: 'fade',

active: 'dropdown'

};

Dropdown.prototype.show = function(){

console.log(this);

this.$elem.addClass(this.activeClass);

this.$layer.showHide('show');

};

Dropdown.prototype.hide = function(){

this.$elem.removeClass(this.activeClass);

this.$layer.showHide('hide');

};

//$.fn.extend() 函数为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)。语法：$.fn.extend( object )

$.fn.extend({

dropdown:function(option){

return this.each(function(){

// jQuery.extend()函数用于将一个或多个对象的内容合并到目标对象。

var options = $.extend({},Dropdown.DEFAULTS,$(this).data(),option);

new Dropdown(this,option);

})

}

});

})(jQuery);

问题1，构造函数里的代码

this.$elem = $(elem),

this.$layer = this.$elem.find('.dropdown-layer'),

this.activeClass = options.active + '-active';

把var改称this,每行本来用‘，’隔开，现在换成this了，不应该用分号隔开吗？我看老师还是用的逗号？

问题2，没有报错，但是最后打印出来时如图，是

慕盖茨9092533 2019-10-21

源自：实战：电商网站下拉菜单 3-2 用构造函数的形式重写dropdown模块

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2019-10-21 18:22:47

同学你好，

是dropdown.js文件中实例化DropDown函数的时候传入参数的问题，参考修改：

合并的参数为options，不是传入的option哦，修改之后如下：

自己测试下。

祝学习愉快！欢迎采纳~

收起回答

好帮手慕星星 2019-10-21 16:15:37

同学你好，

1、构造函数中，不同属性以及方法之间用逗号隔开也是可以的，浏览器解析不会出错。例如：

但是推荐使用分号隔开哦，会规范一些。

2、打印的结果没有问题，this指向的就是实例化的对象，也就是Dropdown。例如：

自己可以测试理解下，祝学习愉快！

欢迎采纳~

收起回答

提问者慕盖茨9092533 #1

老师，this指向没问题，但是这个视频最后打印出来是activeClass:'menu-active',我打印出来的是activeClass:'undefined-active'，就是红色的字体这里，还有就是点击“我的慕淘“，背景颜色也没有变成白色

2019-10-21 17:02:19