老师，这个报错是什么意思？
来源：3-5 下拉菜单的按需加载
慕后端5428016
2019-12-15 16:28:45
<!DOCTYPE html>
<html>
<head>
<title>下拉菜单</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/base.css">
<style type="text/css">
/*dropdown*/
.dropdown{
position: relative;
}
.dropdown-toggle{
position: relative;
z-index: 2
}
.dropdown-arrow{
display: inline-block;
/*background-repeat: no-repeat;*/
vertical-align: middle;
}
.dropdown-layer{
z-index: 1;
overflow: hidden;
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 16px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}
.menu .dropdown-arrow{
margin-left: 8px;
}
.menu .dropdown-layer{
top: 100%;
background: #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: #f3f5f7;
}
.menu-active .dropdown-toggle{
background-color:#fff;
border-color: #cdd0d4;
}
.menu-active .dropdowm-arrow{
/*background-image: url(../img/dropdown-arrow-active.png);*/
}
.icon-triangle-down{
width: 0;
height: 0;
border:4px solid #535b62;
border-right-color: transparent;
border-left-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=1575798728664'); /* IE9 */
src: url('font/iconfont.eot?t=1575798728664#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKUAAsAAAAABkQAAAJHAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApIXwE2AiQDCAsGAAQgBYRtBzYbiwXInpo8KVKFMDYISHAQESAevvZ7PXffhgAkogZU0VEZH0kKyEbITG19bYXO+KIRf//XNG3HRuX5sqwakRrbD/lwx7mMnp9wZOSU6E5NsjCTa83UZXT1he8T907/BApkPqAc96KxJk3qAuriQAp0rEGRlVDGDWMXvMDjBKr16+vs7R6fwYrMHheIq+gVrBR8ssySlUJ5w9Is3pWpTA/pDXiLvh//TWOFpKxglx1e7lhY/9XgpBU3pRsXAcFPQKvLUGAWyMRpY2xfTzBOT3VswTA4VnHwq6FUCqziqCbB/jq7sBb0QvEzSTzpoyYTPFZPzUDnpJuJZuOeb789tZF/efq8abWPj+2/3y8u2hFH5ov2yI8Rhtvzi/lo1tHPivt0BR0EXx/vNaz9V9Zk8NX8z8iYDXOAyn3Yg38hGdiUDZltSVmTNLYnzeeoqFaNEuxq9j1V33biVKjUNsFRoS9DodIomdlZlKkxh3KVNlFtxt7qGi1YT+QqTHsACI1ekdT7gUKjlszsF8q0+0O5xuih2nm0bFljPOLaLpMSsqjvMZqycK5N1uLiE/LXmeK8LOJeEDcxiJPhuJzco4J4iRnNjZ+KOHRc5rgLTqMsK7HiMiEjwyBSzUYj1/SmoSlzWLOLEUUQC2n3UGSUCi7oLNYqnz9BvGsZhTsa6qIXCGvE/tHE0HgAuacuBjU8yiuNG96UEA5yWCmHdsEgksmUUNU8KEEMMRQmRCozI6eVG6oebq/N/24XVLMNKZzyQu11VJlK/KxCymsAAAAA') format('woff2'),
url('font/iconfont.woff?t=1575798728664') format('woff'),
url('font/iconfont.ttf?t=1575798728664') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('font/iconfont.svg?t=1575798728664#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;
}
.icon-xialajiantou:before {
content: "\e60f";
}
[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 !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="dropdown-arrow icon transition"></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>
</div>
<button id="btn-show">点我显示</button>
<button id="btn-hide">点我隐藏</button>
<script type="text/javascript" src="../js/jquery-3.4.1.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">
$('.dropdown').on('dropdown-show dropdown-shown dropdown-hide dropdown-hidden',function(e){
console.log(e.type);
})
$('.dropdown').dropdown({
event:'rrt',
css3:true,
js:true,
//animation:'slideUpDown'
active:'menu',
delay:0
});
$('#btn-show').on('click',function(){
$('.dropdown').dropdown('show');
});
$('#btn-hide').on('click',function(){
$('.dropdown').dropdown('hide');
});
</script>
</body>
</html>
(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 = {
event: 'hover',
css3: false,
js: false,
animation: 'fade',
delay: 0,
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', $.proxy(this.hide, this));
} else {
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() {
_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 $this=$(this);
var dropdown =$this.data('dropdown');
var options = $.extend({}, Dropdown.DEFAULTS, $this.data(), typeof option === 'object' && option);
if (!dropdown) {
$this.data('dropdown', dropdown = new Dropdown($this, options))
}
var dropdown = new Dropdown(this, options);
if (typeof dropdown[option] === 'function') {
dropdown[option]();
}
})
}
})
})(jQuery);
鼠标滑动事件正常，为什么按钮都失效了？
1回答
-
同学你好，按钮的效果是因为有报错才会无效，报错的意思是this.$elem不是一个函数，这个是因为如下调用的时候，参数传递错误：
this是原生js的对象，而这里应该传递jQuery对象，然后才可以使用jQuery中的find（）方法。
改为如下就不会报错了：
不过这一段代码没有用上，把它去掉，按钮的点击效果也正常。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题