老师帮我看下哪里出问题了 代码报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./font/iconfont.css">
<title>dropDown</title>
<style>
.dropdown {
position: relative;
/* margin: 150px; */
}
.dropdown-toggle {
position: relative;
z-index: 2;
}
/* 下拉箭头 */
.dropdown-arrow {
display: inline-block;
/* text-align: center; */
vertical-align: text-top;
}
.dropdown-layer {
display: none;
overflow: hidden;
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 {
margin-left: 5px;
}
.menu .dropdown-layer {
/* top: 44px; */
top: 100%;
border: 1px solid #cdd0d4;
/* border-top: none; */
background-color: #fff;
}
.menu-item {
display: block;
height: 30px;
padding: 0 12px;
line-height: 30px;
white-space: nowrap;
color: #4d555d;
}
.menu-item:hover {
background-color: #f3f5f7;
}
/* css hover 实现显示隐藏 */
.menu-active .dropdown-toggle {
background-color: #fff;
border-color: #cdd0d4;
}
/* 下拉箭头效果 */
[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.3s;
}
/* .menu-active .dropdown-layer {
display: block;
} */
/* 显示隐藏效果 */
.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;
}
</style>
</head>
<body>
<div class="menu dropdown fl" data-active="menu">
<a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="iconfont dropdown-arrow transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" class="menu-item">已买到宝贝</a></li>
<li><a href="###" class="menu-item">我的足迹</a></li>
</ul>
</div>
<div class="menu dropdown fl" data-active="menu">
<a href="javascript:;" class="dropdown-toggle">我的慕淘2<i class="iconfont dropdown-arrow transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" class="menu-item">已买到宝贝2</a></li>
<li><a href="###" class="menu-item">我的足迹2</a></li>
</ul>
</div>
<div class="menu dropdown fl" data-active="menu">
<a href="javascript:;" class="dropdown-toggle">我的慕淘3<i class="iconfont dropdown-arrow transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" class="menu-item">已买到宝贝3</a></li>
<li><a href="###" class="menu-item">我的足迹3</a></li>
</ul>
</div>
<script src="./js/jquery.js"></script>
<script src="./js/transition.js"></script>
<script src="./js/showHide.js"></script>
<script src="./js/dropDown.js"></script>
<script>
$('.dropdown').dropdown({
event: 'hover',
css3: true,
js: true,
animation: 'slideUpDown',
active: 'menu',
delay: 0
});
</script>
</body>
</html>(function ($) {
'use strict';
// Constructor
function Dropdown(elem, options) {
this.$elem = $(elem),
this.$layer = this.$elem.find('.dropdown-layer'),
this.activeClass = options.active + '-active';
this.$layer.showHide(options);
var self = this;
if (options.event === 'click') {
this.$elem.on('click', function (e) {
self.show();
e.stopPropagation();
});
$(document).on('click', $.proxy(this.hide, this));
} else {
this.$elem.hover($.proxy(this.show, this), $.proxy(this.hide, this));
};
}
Dropdown.DEFAULTS = {
event: 'hover',
css3: true,
js: true,
animation: 'fade',
delay: 0,
active: 'dropdown'
};
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 () {
console.log($(this).data());
var options = $.extend({}, Dropdown.DEFAULTS, $(this).data(), option);
new Dropdown(this, options);
});
}
});
})(jQuery);
下拉菜单没反应
14
收起
正在回答
4回答
同学你好，相似的问题在同学的另一个提问里解答了，快去查看吧，链接：http://class.imooc.com/course/qadetail/182788
祝学习愉快~
琥珀_2020
2020-01-02 13:38:03
找到问题了
function Dropdown(elem, options) {
this.$elem = $(elem);
this.options = options;
this.$layer = this.$elem.find('.dropdown-layer');
this.activeClass = options.active + '-active';
this.$layer.showHide(options);
var self = this;
if (options.event === 'click') {
this.$elem.on('click', function (e) {
self.show();
e.stopPropagation();
});
$(document).on('click', $.proxy(this.hide, this));
} else {
this.$elem.hover($.proxy(this.show, this), $.proxy(this.hide, this));
}
};没有加 this.options = options;
相似问题
老师，我这里报错帮忙看看
13
0
4
老师，帮忙看一下代码哪里出了问题，谢谢
7
0
7
请帮我看一下代码哪里出问题了？
13
0
4
麻烦老师看看哪里出错了
0
0
5
老师您好，请您帮我看一下问题出现在哪里
30
0
4
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星