老师，报错了

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<li class="fl"><a href="#" class="nav-site-mobile link">手机逛慕淘</a></li>

</ul>

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

</ul>

</li>

<li><a href="#" target="_blank" class="dropdown-item">收藏的宝贝</a></li>

<li><a href="#" target="_blank" class="dropdown-item">收藏的店铺</a></li>

</ul>

</li>

</li>

<li><a href="#" target="_blank" class="dropdown-item">已卖出的宝贝</a></li>

<li><a href="#" target="_blank" class="dropdown-item">出售中的宝贝</a></li>

<li><a href="#" target="_blank" class="dropdown-item">卖家服务市场</a></li>

<li><a href="#" target="_blank" class="dropdown-item">卖家培训中心</a></li>

</ul>

</li>

<li><a href="#" target="_blank" class="dropdown-item">消费者客服</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

/*index.css*/

/*nav-site*/

.nav-site{

width: 100%;

background-color: #f3f5f7;

}

.nav-site .container{

height: 44px;

line-height: 44px;

border-bottom: 1px solid #cdd0d4;

}

.nav-site-login{

color: #f01414;

margin-left: 15px;

}

.nav-site-signup,.nav-site-mobile{

margin-left: 10px;

}

/*dropdown*/

.dropdown{

position: relative;

}

.dropdown-toggle{

display: block;

height: 100%;

padding: 0 16px 0 12px;

border-left: 1px solid #f3f5f7;

border-right: 1px solid #f3f5f7;

}

.dropdown-arrow{

display: inline-block;

width: 8px;

height: 6px;

background: url(../img/dropdown-arrow.png) no-repeat;

margin-left: 8px;

vertical-align: middle;

}

.dropdown-layer{

display: none;

position: absolute;

top: 44px;

background-color: #fff;

border: 1px solid #cdd0d4;

}

.dropdown-left{

left: 0;

right: auto;

}

.dropdown-right{

right: 0;

left: auto;

}

.dropdown-item{

display: block;

height: 30px;

line-height: 30px;

color: #4d555d;

padding: 0 12px;

white-space: nowrap;

}

.dropdown-item:hover{

background-color: #f3f5f7;

}

.nav-site-category{

margin: 0 15px;

}

.nav-site-service{

margin-right: 15px;

}

/*index.js*/

$('.dropdown').hover(function(){

var $dropdown = $(this);

$dropdown.find('.dropdown-toggle').css({

'background-color':'#fff',

'border-color':'#cdd0d4'

});

$dropdown.find('.dropdown-arrow').css({

'background-image':'url(../img/dropdown-arrow-active.png)'

});

$dropdown.find('.dropdown-layer').show();

},function(){

$dropdown.find('.dropdown-toggle').css({

'background-color':'',

'border-color':'#f3f5f7'

});

$dropdown.find('.dropdown-arrow').css({

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

});

$dropdown.find('.dropdown-layer').hide();

});

慕盖茨9092533 2019-10-10

源自：实战：电商网站站点导航 3-5 让菜单下拉

收起

2回答

好帮手慕慕子回答被采纳获得+3积分 2019-10-10 17:45:09

同学你好，请问你的项目目录截图是如下所示吗？

如果是这样的话，那么是因为如下所示js语句给dropdown-arrow设置样式，是添加到标签行内哦，

效果图：也就是说是从html文件为基准查找图片哦，因为html文件与img文件是同级的，所以不需要添加../

同学可以尝试理解一下哦

如果还有疑惑，可以再次提问，将你项目目录也截图过来，便于老师帮助同学准确的定位与解决问题

如果帮助到了你，欢迎采纳！

祝学习愉快~~~~

收起回答

好帮手慕慕子 2019-10-10 13:40:26

同学你好，老师测试你的这段代码，因为在第二个函数中没有声明$dropdown, 所以出现报错$dropdown未定义。

建议修改：可以添加如下声明语句

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

收起回答

提问者慕盖茨9092533 #1

老师，还有一个问题，在index.js里给.dropdown-arrow添加背景图片，我前面加了../图片就出不来了，去掉才正常显示，index.js在js文件夹中，引用的图片在img文件夹中，index.js和img文件夹不在同一级，不是应该加../嘛

2019-10-10 14:50:23