火狐控制台显示: 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文件的注释是我在提问时加上去的
相似问题