js有问题
来源：1-2 让下拉菜单开始工作
慕仰3297879
2020-03-29 15:51:15
跟着老师码最后报了两个错
<!DOCTYPE html>
<html>
<head>
<title>下拉菜单</title>
<link rel="stylesheet" type="text/css" href="../css/base.css">
<style type="text/css">
.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;
display: none;
position: absolute;
}
.dropdown-left{
left: 0;
right: auto;
}
.dropdown-right{
left: auto;
right: 0
}
/*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;
}
.menu .dropdown-layer{
top: 100%;
background-color: #fff;
border: 1px solid #cdd0d4;
}
.menu-item{
display: block;
height: 30px;
line-height: 30px;
color: #4d555d;
white-space: nowrap;
padding: 0 10px;
}
.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);
}
.menu-active .dropdown-layer{
display: block;
}
</style>
</head>
<body>
<!-- <div class="menu dropdown">
<div class=" dropdown-toggle">我的慕多多<i class="dropdown-arrow"></i></div>
<div class="dropdown-layer dropdown-left"></div>
</div> -->
<div class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="link dropdown-toggle">我的慕多多<i class="dropdown-arrow"></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>
<div class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="link dropdown-toggle">我的慕多多<i class="dropdown-arrow"></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>
<script type="text/javascript" src="../js/dropdown.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
// $('.dropdown').hover(function(){
// var $this = $(this);
// $this.addClass($this.data('active')+'-active');
// },function(){
// var $this = $(this);
// $this.removeClass($this.data('active')+'-active');
// });
// $('.dropdown').each(function(){
// dropdown($(this))
// })
// dropdown($('.dropdown')[0])
$('.dropdown').dropdown()
</script>
</body>
</html>
(function($){
'use strict';
function dropdown(elem){
var $elem = $(elem),
activeClass = $elem.data('active')+'-active';
$elem.hover(function(){
$elem.addClass(activeClass);
},function(){
$elem.removeClass(activeClass);
});
}
$.fn.extend({
dropdown:function(){
return this.each(function(){
dropdown(this);
})
}
})
$('.dropdown').dropdown();
})(jquery)
1回答
-
同学你好，这里是jquery报错。应该是先引入jquery.js。再引入其他js文件，顺序要调换下。
若之后还是有报错，可以继续提问哦。
祝学习愉快~
0
相似问题