老师，您好，使用js和css代码实现商品分类侧边栏的显示部分的视频，我反复看了几次，不是很明白代码功能实现的先后顺序，有几个问题想要咨询一下老师：

1.如上图所示，商品分类隐藏部分的内容<div class="dropdown-layer" style="display: none;"></div> 当鼠标滑动至对应区域的时候是显示的，display:block ，当鼠标离开的时候style="display:none;"  那css来实现的功能是否为字体颜色的改变？我现在搞不清楚的就是style属性block和none之间的切换是通过css来实现还是通过JQery来实现？我找不到对应的那个代码

2.

dropdown.createCategoryDetails =function ($elem ,data){

var html='';

for( var i=0;i< data.length;i++){

html +='<dl class="category-details cf"><dt class="category-details-title fl"><a href="###" target="_blank" class="category-details-title-link">' + data[i].title + '</a></dt><dd class="category-details-item fl">';

for(var j=0;j<data[i].items.length;j++){

//html + ='<a href="###" target="_blank" class="link">' + data[i].items[j] + '</a>';

//html += '<a href="###" target="_blank" class="link">' + data[i].items[j] + '</a>';

html+= '<a href="###" target="_blank" class="link">' +data[i].items[j]+ '</a>';

}

html +='</dd></dl>';

}

上述为循环遍历隐藏部分内容的逐条数据，这里是通过JSON来实现的，有些不明白这里的意义在哪里，我们为什么要通过category-detail-3.json文件来实现文件的读取呢？是不是为了防止对源代码的变动，数据的添加删减通过js来实现，而js的代码是固定的，且html文件也不需要改动？

3.加载文件的是哪一串代码呢？我现在的问题是加载不出来内容，且代码无报错

dropdown.createCategoryDetails = function($elem, data) {

        var html = '';

        for (var i = 0; i < data.length; i++) {

            html += '<dl class="category-details cf"><dt class="category-details-title fl"><a href="###" target="_blank" class="category-details-title-link">' + data[i].title + '</a></dt><dd class="category-details-item fl">';

            for (var j = 0; j < data[i].items.length; j++) {

                html += '<a href="###" target="_blank" class="link">' + data[i].items[j] + '</a>';

            }

            html += '</dd></dl>';

        }

        // setTimeout(function () {

        $elem.find('.dropdown-layer').html(html);

        // },1000);

    };

是否为上述代码？我已经将上述代码写入后，内容还是显示不出来

var dataLoad=$elem.data('load');

if(!dataLoad) return;