老师，一直在转圈圈

老师，一直在转圈圈

<!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="dropdown.js"></script>
    <script src="js.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 ($) {

$(".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);
/*公共样式*/
.container{
	width:1200px;
	margin:0 auto;
}
.link{
	color:#4d555d;
}
.link:hover{
	color:#f01414;
}
.icon{
	font-family:"iconfont"!important;
	font-size:14px;
	font-style:"normal";
	-webkit-font-smoothing:antialiased;
	-webkit-text-stroke-width:0.2px;
	-moz-osx-font-smoothing:grayscale;
}
/*showHide*/
.fadeOut{
	visibility:hidden;
	opacity:0 !important;
}
.slideUpDownCollapse{
	height:0 !important;
	padding-top:0 !important;
	padding-bottom:0 !important;
}
.sledeLeftRightCollapse{
	width:0 !important;
	padding-left:0 !important;
	padding-right:0 !important;
}

		/*下拉菜单样式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{
    display:none;
    position: absolute;
    z-index: 1;
}
.dropdown-left{
	left:0;
	right:auto;

}
.dropdown-right{
	right:0;
	left:auto;

}
[class*="-active"].dropdown-arrow{
	-o-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
	transform:rotate(180deg);
}
.dropdown-loading{
	width:32px;
	height:32px;
	background:url(img/loading.gif) no-repeat;
	margin:20px;
}
/*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:43px;
    background-color:#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-color:#f3f5f7;
}
.menu.menu-active .dropdown-toggle,
.menu.dropdown:hover .dropdown-toggle{
	background-color:#fff;
    border-color:#cdd0d4;
}
.menu.menu-active .dropdown-arrow{
	background-image:url(img/dropdown-arrow-active.png);
}


dropdown-seller.json

[

  {

  "url":"###",

  "name":"免费开店"

  },

  {

  "url":"###",

  "name":"已卖出的宝贝"

  },

  {

  "url":"###",

  "name":"出售中的宝贝"

  },

   {

    "url":"###",

    "name":"卖家服务市场"

  },

  {

    "url":"###",

    "name":"卖家培训中心"

  },

  {

    "url":"###",

    "name":"体验中心"

  }

]
陈孝芳 2020-06-02
源自：实战：下拉菜单组件化   3-6 改写站点导航中的下拉菜单
12
收起

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

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

1回答
好帮手慕久久 2020-06-02 14:01:35

同学你好，“dropdown-seller.json”这个文件是和页面同级吗？如果该文件路径写错，会因为数据请求不回来而导致下拉列表一直显示转圈的loading。

老师测试时，将“data-load”的值（也就是dropdown-seller.json文件的路径）改成如下，是可以正常展示的：

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

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

同学可以再检查一下。

祝学习愉快！

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

那个红色圈圈里面的数字怎么写进去呀
43 0 7
老师，百度点击了搜索按钮之后网页没有转圈。谷歌点击了搜索按钮之后会转圈？
18 0 3
老师，帮我看看我的延迟加载，用swiper8写的
4 1 3
请老师检查
2 0 3
老师，它这里为什么说我的dropdown不是函数
14 0 3

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

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

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

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

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

22 4

2-11检查

78 1

老师，这样对吗

80 1

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

56 1

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

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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