老师，火狐下面打印data没出来

/*html*/

<!DOCTYPE html>

<html>

<head>

<title>下拉菜单封装</title>

/*dropdown公共的*/

body{

background-color: #eee;

}

.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;

}

/*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;

}

.dropdown-layer{

top: 100%;

background-color: #fff;

overflow: hidden;

border: 1px solid #cdd0d4;

}

.menu-item{

display: block;

height: 30px;

line-height: 30px;

color: #4d555d;

padding: 0 12px;

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);*/

}

.icon-triangle-down{

width: 0;

height: 0;

border: 4px solid #535b62;

border-left-color: transparent;

border-right-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=1571101906947'); /* IE9 */

src: url('font/iconfont.eot?t=1571101906947#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANYAAsAAAAABzgAAAMKAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCFIIEATYCJAMMCwgABCAFhG0HQRtVBiMRNmsOMpP9szB2WzQxLiKK4WL5jC/XFS8XBYbV2cfa1E8Vjf1+EQ+Pa+j7Se6K4FoFKCsJBoxqahLRuMkKOTVHmiWQ0N3/OcsI3Gb3XtRkSc6ihztfSD6U0/RgaF0dOLNHp7sIIsJPdDgByGAEQyQaQ/m8CYGz7PNcTm9lCcwPlMuYy/bEo16AcUCBjTUpsgJKkBvGbiJwCMcJNBs0JVYe2/drVIBxgbjuLp3RmLMrLZWhUahrlhbxSqUxPU7vgJf8+/FXEhSSKgNTd19cPW/hh5/wAxsDjlOCYj4vrFVkTKEQJ2v9h2WZnJI1B9oSNlIrQporgqJweait4R8eSRA1UN4KxrRU4gcsTw2pyrsuz6BWSw7hCsDttVWouqupsUg0nRvlZxYHl8Z46SyZuTDATc13I0+e5IXVSwCeVB4A4dvHU37lAtKeXkmyazsAcSS5W072N4Sp9YcqcGv/ZOzsELt6OXpeDW5djF0Nyp7oEbX+7485n5yGZyAXV/39EUZb9RpQB027SXPvlyIIvvM+wQomar3Mb90yLQtIp1uUK/p2zib85H/C1zzd9FDA3P0saFruiB21HBVHy6UPu4ev5THFsmvZjQOYKgwYORMfMQBm67i/X/8bL18eVzJm/jEaYQGfdt1xa9GvFDRK9Fb8aEXPphKqgCMXX47lcSZbVb2GTXMYsgGEu30fb+57mXRo1JciaTCArNEQWThTqLSYRq3RPJpN2rS6RY8bsihNmHBfQei0jqTdG2Sd3pOF8w2Vfv9R6ww8mj3wHYctd87htlehVKnA7B9d3jaMXLoVlS8yY5VKVsV53ySDi2AcRMXMkxqSOWYMPyZRZWRpa3wop1FVtdhJ6ynXwKp2lzDkujcFeVvD1pUgKUUKKPMPOblWg2l7tS19/oUYo0pKWlgD8W9EDFz3KBaIepBPfdOLdS+vDH4YCaUYYqJVQw/FSyqYbKGufpBHcipgR8Q7F6HWivvqg/WN9fftAGALTJvFdDKbzGF/06VV6klOo+24Nrjwd8wtAQAAAA==') format('woff2'),

url('font/iconfont.woff?t=1571101906947') format('woff'),

url('font/iconfont.ttf?t=1571101906947') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */

url('font/iconfont.svg?t=1571101906947#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{

-o-transform: rotate(180deg);

-ms-transform: rotate(180deg);

-moz-transform: rotate(180deg);

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

.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;

}

.fadeOut{

visibility: hidden;

opacity: 0;

}

.slideUpDownCollapse{

height: 0 !important;

padding: 0 !important;

}

.slideLeftRightCollapse{

width: 0 !important;

padding: 0 !important;

}

</style>

</head>

<body>

<li><a href="#" target="_blank" class="menu-item">已买到的宝贝</a></li>

</ul>

</div>

$('.dropdown').on('dropdown-show',function(e){

//getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。

//chrome浏览器禁止通过ajax访问本地文件的，可以通过其他浏览器测试

$.getJSON('dropdown.json',function(data){

console.log(data);

})

});

$('.dropdown').dropdown({

event: 'hover',

css3: true,

js: true,

delay: 0

// animation: 'slideUpDown',

// active: 'menu'

});

$('#btn-show').on('click',function(){

$('.dropdown').dropdown('show');

});

$('#btn-hide').on('click',function(){

$('.dropdown').dropdown('hide');

});

</script>

</body>

</html>

/*dropdown.js*/

//自我执行的匿名函数

(function($){

'use strict';

//构造函数

function Dropdown($elem,options){

//保存变量

//this相当于下面的dropdown

this.$elem = $elem;

this.options = options;

this.$layer = this.$elem.find('.dropdown-layer');

this.activeClass = options.active + '-active';

this._init();

}

Dropdown.DEFAULTS = {

event: 'hover',

css3: false,

js: false,

animation: 'fade',

delay: 0,

active: 'dropdown'

};

Dropdown.prototype._init = function(){

//showHide的初始化

var self = this;

this.$layer.showHide(this.options);

this.$layer.on('show shown hide hidden',function(e){

self.$elem.trigger('dropdown-' + e.type);

})

if(this.options.event === 'click'){

this.$elem.on('click',function(e){

self.show();

e.stopPropagation();//阻止冒泡

});

$(document).on('click',$.proxy(this.hide,this));

}else{

this.$elem.hover($.proxy(this.show,this),$.proxy(this.hide,this));

}

Dropdown.prototype.show = function(){

var self = this;

if(this.options.delay){

this.timer = setTimeout(function(){

_show();

},this.options.delay);

}else{

_show();

}

function _show(){

self.$elem.addClass(self.activeClass);

self.$layer.showHide('show');

}

};

Dropdown.prototype.hide = function(){

if(this.options.delay){

clearTimeout(this.timer);

}

this.$elem.removeClass(this.activeClass);

this.$layer.showHide('hide');

};

//$.fn.extend() 函数为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)。语法：$.fn.extend( object )

$.fn.extend({

dropdown:function(option){

return this.each(function(){

// jQuery.extend()函数用于将一个或多个对象的内容合并到目标对象。

var $this = $(this),

dropdown = $this.data('dropdown'),

options = $.extend({},Dropdown.DEFAULTS,$this.data(),typeof option === 'object' && option);

if(!dropdown){//first time

$this.data('dropdown',dropdown= new Dropdown($this,options));

};

if(typeof dropdown[option] === 'function'){

dropdown[option]();

}

})

}

});

})(jQuery);

/*dropdown.json*/

[

{

"url":"#",

"name":"已买到的宝贝"

{

"url":"#",

"name":"我的足迹"

{

"url":"#",

"name":"我的优惠券"

}

]

问题1，老师，视频4分钟左右，打印data（json）里面的数据，在火狐下面打印不出来，如图所示，如何解决？

问题2，像这种情况，chrome浏览器禁止通过ajax访问本地文件的，可以通过其他浏览器测试，在这里我换成了火狐，如果需要很多不同的浏览器和版本查看兼容问题的时候，我也不可能同时每个都下载下来去检测，视频中老师之前查看不同浏览器或版本的兼容问题时，用的什么查看的？有没有可以方便查看的插件或模拟器？

慕盖茨9092533 2019-10-22

源自：实战：电商网站下拉菜单 3-5 下拉菜单的按需加载

收起

3回答

好帮手慕言回答被采纳获得+3积分 2019-10-22 19:19:16

同学你好，

1、现在主流浏览器都不支持了，要使用服务器才可以哦。

使用方式也很简单的，可以去查看老师整理的资料哦。

如果现阶段不想下载服务器的话，可以使用vscode编辑器，安装live server插件，安装好之后重启编辑器，右键点击就可以了

2、老师在视频中讲解时，是下载了主流的浏览器（比如谷歌、火狐等），同学也可以下载多个浏览器，以供测试。老师在视频中调试版本的浏览器只有IE哦。

IE调整版本（IE11可以调整多个版本），按f12打开控制台（也可以右键点击查看元素）：

为了保证同学的学习质量，不建议跳着学习哦，因为前面的知识是为后面的知识做铺垫的。

另外为了高效的为同学解答，如果还有其他疑问，可以新建问题进行提问哦

如果帮助到了你，欢迎采纳~祝学习愉快~

收起回答

好帮手慕言 2019-10-22 18:34:53

同学你好，很抱歉是老师的疏忽。

1、如果要查属性的兼容性，可以使用can i use。链接：https://caniuse.com

直接输入就可以查询：

2、如果要获取数据的话，建议用wampserver服务器。因为有时候使用浏览器可能不能实现我们想要的效果，

如果帮助到了你，欢迎采纳~祝学习愉快~

收起回答

提问者慕盖茨9092533 #1

问题1，老师，因为之前自己学过jQ,jQuery进阶我跃过去了没看，但是学到这里卡住了，我就想先找个浏览器像老师视频里一样打印一下，避免自己代码出错，组件化学了半截突然去看jQuery进阶也不合适，等这组件化学完了再去学jQuery进阶,老师，能不能暂时解决我这个问题，找个可以打印的浏览器？问题2，我不是想看某个方法的兼容性，之前我看到视频里老师写页面的时候，测试页面的某个功能在某个浏览器下是否正常，来写兼容，就是不同的浏览器都可以把页面放上去来查看某个功能的兼容性，以便补充代码兼容性，我想知道如何实现？

2019-10-22 18:47:37