体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

按需加载json文件一直加载不出来,报错

来源：3-6 改写站点导航中的下拉菜单

慕言_7946275

2019-10-11 13:24:15

http://img.mukewang.com/climg/5da010fd08b30ba313640105.jpg

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>慕淘网</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
<div class="nav-site"> <!-- 站点导航 -->
<div class="container"> <!-- 父容器,居中对齐 -->
<ul class="fl">
<li class="fl"><a href="javascript:;" class="nav-site-login">亲,请登录</a></li>
<li class="fl"><a href="javascript:;" class="nav-site-signup link">免费注册</a></li>
<li class="fl"><a href="javascript:;" 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 icon transition">&#xe609;</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 icon transition">&#xe609;</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="js/dropdown-seller.json">
<a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow icon transition">&#xe609;</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="menu nav-site-service dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow icon transition">&#xe609;</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> <!-- class="fr" -->
</div>
</div>



<!-- <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> -->
<script>
window.jQuery||document.write('<script type="text/javascript" src="js/jquery.js"><\/script>');
</script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/showHide.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>
<script type="text/javascript" src="js/index.js"></script>

</body>
</html>
// dropdown-seller.json

[
	{
		"url":"###",
		"name":"免费开店"
	},
	{
		"url":"###",
		"name":"已卖出的宝贝"
	},
	{
		"url":"###",
		"name":"出售中的宝贝"
	}
	{
		"url":"###",
		"name":"卖家服务市场"
	}
	{
		"url":"###",
		"name":"卖家培训中心"
	}
	{
		"url":"###",
		"name":"体验中心"
	}


]
// transition.js

(function(){
		var transitionEndEventName={
		transition:'transitionend',
		MozTransition:'transitionend',
		WebkitTransition:'webkitTransitionEnd',
		OTransition:'oTransition otransitionend'
	};
	var transitionEnd='',
		isSupport=false;
	for(var name in transitionEndEventName){
		if(document.body.style[name]!==undefined){
			transitionEnd=transitionEndEventName[name];
			isSupport=true;
			break;
		}
	}
	window.mt=window.mt||{};
	window.mt.transition={
		end:transitionEnd,
		isSupport:isSupport
	}
})();
/*首页专属css样式*/
.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;
}

.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{
	z-index:1;
	display: none;
	position: absolute;
	top:43px;
	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;
	padding:0 12px;
	color:#4d555d;
	white-space: nowrap;
}
.dropdown-item:hover{
	background-color: #f3f5f7;
}
/*.dropdown-active .dropdown-toggle{
	background-color: #fff;
	border:1px solid #cdd0d4;
}
.dropdown-active .dropdown-arrow{
	background: url("../img/dropdown-arrow-active.png");
}
.dropdown-active .dropdown-layer{
	display: block;
}*/  /*方法2:nav-site鼠标移入移出效果;*/

/*.dropdown-active .dropdown-toggle,*/
.dropdown:hover .dropdown-toggle{
	background-color: #fff;
	border-color:#cdd0d4;
}
/*.dropdown-active .dropdown-arrow,*/
.dropdown:hover .dropdown-arrow{
	/*background: url("../img/dropdown-arrow-active.png");*/
}
/*.dropdown-active .dropdown-layer,*/
.dropdown:hover .dropdown-layer{
	display: block;
} /*方法3:nav-site鼠标移入移出效果;*/
/*common.js 公共样式*/
	.container{
		width: 1200px;
		margin:0 auto;
	}
	.link{
		color: #4d555d;
	}
	.link:hover{
		color:#f01414;
	}

	/*showHide*/
	.fadeOut{
		opacity: 0 !important;
		visibility: hidden !important;
	}
	.slideUpDownCollapse{
		height:0 !important;
		padding-top:0 !important;
		padding-bottom: 0 !important;
	}

	.slideLeftRightCollapse{
		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;
			line-height: 1;   /*避免继承container行高44*/
			/*background-repeat: no-repeat;*/
			vertical-align: middle;
		}
		.dropdown-layer{
			z-index:1;
			display: none;
			position: absolute;
		}
		.dropdown-left{
			left:0;
			right:auto;
		}
		.dropdown-right{
			right:0;
			left:auto;
		}

		.menu .dropdown-toggle{
			display: block;
			height: 100%;
			padding:0 13px 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: 5px;
		}
		.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-active .dropdown-toggle{
			background-color: #fff;
			border-color: #cdd0d4;
		}
		.menu-active .dropdown-arrow{
			/*background-image: url("../img/dropdown-arrow-active.png");*/
		}
	


		@font-face {
					font-family: "iconfont";
					src: url('../test/font/iconfont.eot?t=1477124206'); /* IE9*/
					src: url('../test/font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */
					url('../test/font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */
					url('../test/font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
					url('../test/font/iconfont.svg?t=1477124206#iconfont') format('svg'); /* iOS 4.1- */
				}
				.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;
				} 
				/*.menu-active .dropdown-arrow{
					-o-transform: rotate(180deg);
					-ms-transform: rotate(180deg);
					-moz-transform: rotate(180deg);
					-webkit-transform: rotate(180deg);
					transform: rotate(180deg);
				}*/
				[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;
				}

		.transition{
					-o-transition: all 0.5s;
					-ms-transition: all 0.5s;
					-moz-transition: all 0.5s;
					-webkit-transition: all 0.5s;
					transition: all  0.5s;
				}
/*css reset*/  /*重置css样式*/
	/*清除内外边距*/
	body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/
	ul, ol, li, dl, dt, dd, /*列表元素*/
	form, fieldset, legend, input, button, select, textarea, /*表单元素*/
	th, td, /*表格元素*/
	pre {
		padding: 0;
		margin: 0;
	}

	/*重置默认样式*/
	body, button, input, select, textarea {
		/*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/
		color: #333;
		font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
	}
	h1, h2, h3, h4, h5, h6 {
		font-size: 100%;
		font-weight: normal;
	}
	em, i {
		font-style: normal;
	}

	a {
		text-decoration: none;
	}
	li {
		list-style-type: none;
		vertical-align: top;
	}
	img {
		border: none;
		/*display: block;*/
		vertical-align: top;
	}
	textarea {
		overflow: auto;
		resize: none;
	}
	table {
		border-spacing: 0;
		border-collapse: collapse;
	}

/*常用公共样式*/
	.fl {
		float: left;
		display: inline;
	}
	.fr {
		float: right;
		display: inline;
	}
	.cf:before,
	.cf:after {
		content: " ";
		display: table;
		
	}
	.cf:after {
		clear: both;
	}
	.cf {
		*zoom: 1;
	}
//index.js
(function($){ //模块化
	'use strict';
	$('.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(data);
				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({
		// event:'hover',
		css3:true,
		js:false
		// animation:'slideUpDown',
		// delay:0
	});


})(jQuery);


写回答

2回答

好帮手慕言

2019-10-11

已采纳

同学你好，

报错信息是跨域的问题，本地不能直接访问json文件，需要在服务器下访问。可以在wampserver服务器下进行测试哦。

另外，在dropdown-seller.json文件里面，每一项之间需要使用输入法为英文状态下的逗号作为分隔。

代码参考：

http://img.mukewang.com/climg/5da01bf8091d384405470848.jpg

使用同学的代码在wampserver服务器下进行测试，页面效果：
http://img.mukewang.com/climg/5da01c3809b80adb01070143.jpg


http://img.mukewang.com/climg/5da01c3b093e3d4101110266.jpg

建议同学修改后dropdown-seller.json文件，再测试下。

祝学习愉快！

0

慕言_7946275

提问者

2019-10-11

补充一下,在wampserver服务器下也不能加载出下拉列表额

0

0 学习 · 14456 问题

查看课程

相似问题

按需加载并且使用css方式实现slideUpDown特效显示，这是会出现layer高度为0的问题

回答 2

我用火狐浏览器，json文件导不进去，下拉只出现边框，里面空白，loading也没有显示

回答 2

老师 JSON文件加载不出来 该怎么解决

回答 1

loading图片一直转圈圈，无法显示json文件内容，怎么回事

回答 1

下载老师的源码，打开后是这样的。。这里seller.jason的内容一直加载不出来？

回答 2

打开慕课网App查看更多内容