老师，它这里为什么说我的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>
/*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{  /*站点导航“亲，请登陆”设置*/
    margin-left:15px;
    color:#f01414;
}
.nav-site-signup,
.nav-site-mobile{ /*站点导航“注册和手机购买”设置*/
    margin-left:10px;
}
.nav-site-category{
	margin:0 10px;
}

.nav-site-service{
	margin-right:15px;
}
/*下拉菜单样式dropdown*/
.dropdown{
    position: relative;
}
.dropdown-toggle{
	position: relative;
	z-index: 2;
	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:43px;
    background-color:#fff;
    z-index: 1;
    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;
	padding:0 12px;
	color:#4d555d;
	white-space: nowrap;

}
.dropdown-item:hover{
	background-color: #f3f5f7;
}

/*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{  /*站点导航“亲，请登陆”设置*/
    margin-left:15px;
    color:#f01414;
}
.nav-site-signup,
.nav-site-mobile{ /*站点导航“注册和手机购买”设置*/
    margin-left:10px;
}
.nav-site-category{
	margin:0 10px;
}

.nav-site-service{
	margin-right:15px;
}
/*下拉菜单样式dropdown*/
.dropdown{
    position: relative;
}
.dropdown-toggle{
	position: relative;
	z-index: 2;
	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:43px;
    background-color:#fff;
    z-index: 1;
    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;
	padding:0 12px;
	color:#4d555d;
	white-space: nowrap;

}
.dropdown-item:hover{
	background-color: #f3f5f7;
}

.dropdown-active .dropdown-toggle,
.dropdown:hover .dropdown-toggle{
	background-color:#fff;
    border-color:#cdd0d4;
}
.dropdown-active .dropdown-arrow,
.dropdown:hover .dropdown-arrow{
	background-image:url(img/dropdown-arrow-active.png);
}

.dropdown-active .dropdown-layer,
.dropdown:hover .dropdown-layer{
	display:block;
}
// $('.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');
// })
(function($){
	 'use strict'
$(".dropdown").dropdown({
        css3:true,
        js:false  
});
$('.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){
                    // console.log(1);
                    // 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);
                });
            }
        });
})(jQuery);
陈孝芳 2020-06-02
源自：实战：下拉菜单组件化   3-6 改写站点导航中的下拉菜单
14
收起

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

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

2回答
好帮手慕夭夭 2020-06-02 13:45:31

同学你好，代码不全，老师这边无法测试效果。请同学把项目中使用的html,css,js都粘贴到问答区，以便老师测试定位问题。

祝学习愉快~

0
收起回答
好帮手慕夭夭 2020-06-02 11:41:47

同学你好，相同的问题请查看如下：

https://class.imooc.com/course/qadetail/228629

另外，如果还是有问题，请把全部代码（项目中使用的所有的css和js）都要粘贴到问答区，以便老师准确高效的定位问题。

祝学习愉快~

0
收起回答
  • 提问者 陈孝芳 #1
    老师，我那个图片一直在转圈圈，文字内容出不来
    2020-06-02 11:43:40
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

$('.dropdown').dropdown()调用的问题
46 1 5
老师，这里的this为什么就指的是dropdown了？
1 0 3
老师，它这里为什么说我的dropdown不是函数
7 0 1
在参数里直接定义函数，那这个函数到底是个什么？
39 0 12
下面的代码没有用到each也能完成对每个含有dropdown类的遍历，这是为什么
30 0 3

登录后可查看更多问答，登录/注册

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

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

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答
请稍等 ...
微信客服

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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