火狐控制台显示: XML 解析错误:语法错误 行 1,列 1:
来源:3-5 下拉菜单的按需加载
悄然于心
2019-04-26 01:27:17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>站点导航</title>
<link rel="stylesheet" href="../css/reset.css">
<!-- <link rel="stylesheet" href="../css/common.css"> -->
<style>
body{
background-color: #eee;
}
/* dropdown */
.dropdown{
position: relative;
float:left;
}
.dropdown-toggle{
position: relative;
z-index: 2;
}
.dropdown-arrow{
display: inline-block;
/*background-repeat:no-repeat;*/
vertical-align: middle;
}
.dropdown-layer{
display: none;
overflow: hidden;
position: absolute;
z-index: 1;
}
.dropdown-left{
left:0;
right:auto;
}
.dropdown-right{
left:auto;
right:0;
}
/* 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:100%;
background-color:#fff;
border:1px solid #cdd0d4;
}
.menu-item{
display: block;
height:30px;
line-height: 30px;
white-space:nowrap;
padding:0 12px;
color:#4d555d;
}
.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);*/
}
.icon-triangle-down{
width:0;
height:0;
border:4px solid #535b62;
border-right-color:transparent;
border-left-color:transparent;
border-bottom:none;
}
.menu-active .icon-triangle-down{
border-top:none;
border-bottom: 4px solid #f11c1c;
}
@font-face {
font-family: "iconfont";
src: url('../font/iconfont.eot?t=1556027603322'); /* IE9 */
src: url('../font/iconfont.eot?t=1556027603322#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('../font/iconfont.woff?t=1556027603322') format('woff'),
url('../font/iconfont.ttf?t=1556027603322') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('../font/iconfont.svg?t=1556027603322#iconfont') format('svg'); /* iOS 4.1- */
}
.icon {
font-family: "iconfont" !important;
font-size: 14px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class*="-active"] .dropdown-arrow{
transform:rotate(180deg);
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}
.transition{
transition:all 0.5s;
-o-transition:all 0.5s;
-ms-transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
.fadeOut{
opacity:0;
visibility: hidden;
}
.slideUpDownCollapse{
height:0 !important;
padding-top:0 !important;
padding-bottom:0 !important;
}
.slideLeftRightCollapse{
width:0 !important;
padding-left:0 !important;
padding-right:0 !important;
}
</style>
</head>
<body>
<div class="menu dropdown fl" data-active="menu">
<a href="###" class="dropdown-toggle link">我的慕多多<i class="dropdown-arrow icon transition"></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>
</div>
<script src="../js/jQuery.js"></script>
<script src="../js/transition.js"></script>
<script src="../js/showHide.js"></script>
<script src="../js/dropdown.js"></script>
<script>
$(".dropdown").on("dropdown-show",function(e){
$.getJSON("dropdown.json",function(data){
var $layer = $(this).find(".dropdown-layer"),
html = "";
// $layer.html();
$.getJSON("dropdown.json",function(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>";
}
},1000)
})
})
})
$(".dropdown").dropdown({
css3:true,
js:true,
event:"clicgk",
delay:0
// animation:"slideUpDown"
// active:"menu"
});
</script>
</body>
</html>//JSON
[
{
"url":"###",
"name":"已买到的宝贝"
},
{
"url":"###",
"name":"我的足迹"
}
]我没发现JSON有语法错误呀。。
而且在Chrome上文字图片还可以显示,在火狐上就变成一些奇怪的东西了。。
2回答
好帮手慕星星
2019-04-26
同学你好,火狐浏览器报错是正常的,是访问json文件的原因,Chrome 浏览器不能直接访问json文件,需要在服务器下才能访问,而火狐浏览器可以直接访问,但是会报错,这个没有关系。
代码中的问题:

自己可以测试下,祝学习愉快!
悄然于心
提问者
2019-04-26
JSON文件的注释是我在提问时加上去的
相似问题