老师,它这里为什么说我的dropdown不是函数

老师,它这里为什么说我的dropdown不是函数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>慕淘网</title>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="css.css">
<link rel="stylesheet" href="common.css">
</head>
<body>
<div class="nav-site">
    <div class="container">
        <ul class="fl">
            <li class="fl"><a href="javascript:;" id="nav-site-signin" class="nav-site-login">亲,请登录</a></li>
            <li class="fl"><a href="javascript:;" id="nav-site-signup" class="nav-site-signup link transition">免费注册</a></li>
            <li class="fl"><a href="###" target="_blank" class="nav-site-mobile link">手机逛慕淘</a></li>
        </ul>
        <ul class="fr">
            <li class="menu dropdown fl" data-active="menu">
                <a href="###" target="_blank" class="dropdown-toggle link transition">我的慕淘<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>
            </li>
            <li class="menu dropdown fl" data-active="menu">
                <a href="###" target="_blank" class="dropdown-toggle link transition">收藏夹<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>
            </li>
            <li class="fl">
                <a href="###" target="_blank" class="nav-site-category link transition">商品分类</a>
            </li>
            <li class="menu dropdown fl" data-active="menu" data-load="dropdown-seller.json">
                <a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow icon transition"></i></a>
                <ul class="dropdown-layer dropdown-left">
                    <li class="dropdown-loading"></li>
                    <!-- <li><a href="###" target="_blank" class="menu-item">免费开店</a></li>
                        <li><a href="###" target="_blank" class="menu-item">已卖出的宝贝</a></li>
                        <li><a href="###" target="_blank" class="menu-item">出售中的宝贝</a></li>
                        <li><a href="###" target="_blank" class="menu-item">卖家服务市场</a></li>
                        <li><a href="###" target="_blank" class="menu-item">卖家培训中心</a></li>
                        <li><a href="###" target="_blank" class="menu-item">体验中心</a></li> -->
                </ul>
            </li>
            <li class="nav-site-service menu dropdown fl" data-active="menu">
                <a href="###" target="_blank" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow"></i></a>
                <ul class="dropdown-layer dropdown-right">
                    <li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
                    <li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
    <!-- <script src="jquery.js"></script> -->
   <!--  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
    <script>
     // window.jQuery||document.write('<script src="jquery.js"><'+'/script>')
     window.jQuery||document.write('<script src="jquery.js"><\/script>');
    </script>
    <script src="transition.js"></script>
    <script src="showHide.js"></script>
    <script src="js.js"></script>
    <script src="dropdown.js"></script>
</body>
</html>
// $('.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(){
//     var $dropdown=$(this);
// 	$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();
// })

// $('.dropdown').hover(function(){
// 	$(this).addClass('dropdown-active');
// },function(){
// 	$(this).removeClass('dropdown-active');
// })

$('.dropdown').on('dropdown-show',function(e){
			var $this=$(this),
			    dataLoad=$this.data('load');

			if(!dataLoad) return;

			if(!$this.data('loaded')){
				var $layer=$(this).find('.dropdown-layer'),
			        html='';
				$.getJSON(dataLoad,function(data){
				//在本地上获取很快
				// for(var i=0;i<data.length;i++){
				// 	html+='<li><a href="'+data[i].url+'" target="_blank" class="menu-item">'+data[i].name+'</a></li>'
				// }
				// $layer.html(html);

				//现在来延迟
				setTimeout(function(){
					for(var i=0;i<data.length;i++){
				 	html+='<li><a href="'+data[i].url+'" target="_blank" class="menu-item">'+data[i].name+'</a></li>'
				 }
				 $layer.html(html);
				 $this.data('loaded',true);
			},1000);
		});
	}
});
$('.dropdown').dropdown({
    css3:true,
    js:false
});


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕夭夭 2020-06-02 11:20:17

同学你好,问答区下面粘贴的js代码,是这个文件中的吧?

http://img1.sycdn.imooc.com//climg/5ed5c50b0992a5ee04540143.jpg

这里是因为引入顺序不对,js.js中用到了dropdown,但是dropdown.js再后面引入的。也就是用到dropdown时候,dropdown还没有定义,所以报错。如下修改顺序:

http://img1.sycdn.imooc.com//climg/5ed5c54f097a611605150118.jpg

如果还是有报错,建议把全部代码都粘贴到问答区(html,css,js都粘贴),并标明代码是哪一个文件的。以便老师准确定位问题。

祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师