体系课

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

左侧商品分类栏右侧隐藏的内容为什么显示不出来呢

来源：1-5 按需加载商品详情

键盘f11

2020-10-18 15:24:24

# 具体遇到的问题商品右侧浮动栏的内容通过js代码显示不出来

# 报错信息的截图

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

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


# 相关课程内容截图

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

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


# 尝试过的解决思路和结果
老师，您好，我这边尝试着看着老师的视频写代码，为什么还是显示不出来呢，当鼠标滑动到商品分类栏的区域，右侧隐藏的内容显示不出来是因为什么原因？ 我这边发现一个小问题，就是视频中老师只通过index.js的文件编辑就可以使得右侧隐藏的内容显示出来，可是我这边加载完整的index.js却没有用，因为这边还涉及到dropdown.js文件和showhide.js文件的使用，我这边如何将这些文件联系起来呢？
# 粘贴全部相关代码，切记添加代码注释（请勿截图）

在这里输入代码，可通过选择【代码语言】突出显示

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

*{

margin: 0px;

padding: 0px;

}

a{

text-decoration: none;

}

ul li{

list-style-type: none;

vertical-align: top;

}

.category{

position: relative;

width: 208px;

font-size: 14px;

}

.category .dropdown-toggle{

height: 36px;

line-height: 36px;

padding-left: 16px;

color: #fff;

}

.category-list{

height:512px;

background-color: #ca003f;

}

.category .dropdown-arrow{

font-family: simsun;

font-weight: bold;

top:12px;

right: 12px;

display: inline-block;

vertical-align: middle;

line-height: 1;

position: absolute;

}

.category .dropdown-link{

color: #fff;

}

</style>

</head>

<body>

<div class="focus">

<div class="container2">

<div id="focus-category"  class="category fl">

<a href="" class="category-title"><i class="icon">&#xe608;</i>商品分类</a>

<ul class="category-list">

<li class="dropdown" data-active="category" data-load="js/category-detail-1.json">

<div class="dropdown-toggle">

<a href="###" class="dropdown-link">家用电器</a>

<i class="dropdown-arrow">&gt;</i>

</div>

<div class="dropdown-layer">

<div class="dropdown-loading"></div>

</div>

</li>

<li class="dropdown" data-active="category" data-load="js/category-detail-2.json">

<div class="dropdown-toggle">

<a href="###" class="dropdown-link">手机</a>、<a href="###" target="_blank" class="dropdown-link">运营商</a

>、<a href="###" class="dropdown-link">数码</a>

<i class="dropdown-arrow">&gt;</i>

</div>

<div class="dropdown-layer">

<div class="dropdown-loading"></div>

</div>

</li>

<li class="dropdown" data-active="category" data-load="js/category-detail-3.json">

<div class="dropdown-toggle">

<a href="###" class="dropdown-link">电脑</a>、<a href="###" target="_blank" class="dropdown-link">办公</a

>

<i class="dropdown-arrow">&gt;</i>

</div>

<div class="dropdown-layer">

<div class="dropdown-loading"></div>

</div>

</li>

<li class="dropdown" data-active="category">

<div class="dropdown-toggle">

<a href="###" class="dropdown-link">家居</a>、<a href="###" target="_blank" class="dropdown-link">家具</a

>、<a href="###" class="dropdown-link">家装</a>、<a href="###" class="dropdown-link">厨具</a>

<i class="dropdown-arrow">&gt;</i>

</div>

<div class="dropdown-layer">

<div class="dropdown-loading"></div>

</div>

</li>

<li class="dropdown" data-active="category">

<div class="dropdown-toggle">

<a href="###" class="dropdown-link">男装</a>、<a href="###" target="_blank" class="dropdown-link">女装</a

>、<a href="###" target="_blank" class="dropdown-link">童装</a

>、<a href="###" target="_blank" class="dropdown-link">内衣</a

>

<i class="dropdown-arrow">&gt;</i>

</div>

<div class="dropdown-layer">

<div class="dropdown-loading"></div>

</div>

</li>

<li class="dropdown" data-active="category">

<div class="dropdown-toggle">

<a href="###" class="dropdown-link">化妆</a>、<a href="###" target="_blank" class="dropdown-link">清洁</a

>、<a href="###" target="_blank" class="dropdown-link">宠物</a

>

<i class="dropdown-arrow">&gt;</i>

</div>

<div class="dropdown-layer">

<div class="dropdown-loading"></div>

</div>

</li>

<li class="dropdown" data-active="category">

<div class="dropdown-toggle">

<a href="###" class="dropdown-link">运动户外</a>、<a href="###" target="_blank" class="dropdown-link">钟表</a

>

<i class="dropdown-arrow">&gt;</i>

</div>

<div class="dropdown-layer">

<div class="dropdown-loading"></div>

</div>

</li>

<li class="dropdown" data-active="category">

<div class="dropdown-toggle">

<a href="###" class="dropdown-link">汽车</a>、<a href="###" target="_blank" class="dropdown-link">汽车用品</a

>

<i class="dropdown-arrow">&gt;</i>

</div>

<div class="dropdown-layer">

<div class="dropdown-loading"></div>

</div>

</li>

<li class="dropdown" data-active="category">

<div class="dropdown-toggle">

<a href="###" class="dropdown-link">母婴</a>、<a href="###" target="_blank" class="dropdown-link">玩具乐器</a

>

<i class="dropdown-arrow">&gt;</i>

</div>

<div class="dropdown-layer">

<div class="dropdown-loading"></div>

</div>

</li>

<li class="dropdown" data-active="category">

<div class="dropdown-toggle">

<a href="###" class="dropdown-link">食品</a>、<a href="###" target="_blank" class="dropdown-link">酒类</a

>、<a href="###" target="_blank" class="dropdown-link">生鲜</a

>、<a href="###" target="_blank" class="dropdown-link">特产</a

>

<i class="dropdown-arrow">&gt;</i>

</div>

<div class="dropdown-layer">

<div class="dropdown-loading"></div>

</div>

</li>

<li class="dropdown" data-active="category">

<div class="dropdown-toggle">

<a href="###" class="dropdown-link">医药保健</a>

<i class="dropdown-arrow">&gt;</i>

</div>

<div class="dropdown-layer">

<div class="dropdown-loading"></div>

</div>

</li>

<li class="dropdown" data-active="category">

<div class="dropdown-toggle">

<a href="###" class="dropdown-link">图书</a>、<a href="###" target="_blank" class="dropdown-link">音像</a

>、<a href="###" target="_blank" class="dropdown-link">电子书</a

>

<i class="dropdown-arrow">&gt;</i>

</div>

<div class="dropdown-layer">

<div class="dropdown-loading"></div>

</div>

</li>

<li class="dropdown" data-active="category">

<div class="dropdown-toggle">

<a href="###" class="dropdown-link">彩票</a>、<a href="###" target="_blank" class="dropdown-link">旅行</a

>、<a href="###" target="_blank" class="dropdown-link">充值</a

>、<a href="###" target="_blank" class="dropdown-link">票务</a

>

<i class="dropdown-arrow">&gt;</i>

</div>

<div class="dropdown-layer">

<div class="dropdown-loading"></div>

</div>

</li>

<li class="dropdown" data-active="category">

<div class="dropdown-toggle">

<a href="###" class="dropdown-link">理财</a>、<a href="###" target="_blank" class="dropdown-link">众筹</a

>、<a href="###" target="_blank" class="dropdown-link">白条</a

>、<a href="###" target="_blank" class="dropdown-link">保险</a

>

<i class="dropdown-arrow">&gt;</i>

</div>

<div class="dropdown-layer">

<div class="dropdown-loading"></div>

</div>

</li>

</ul>

</div>

<div class="slider fl"></div>

<div class="focus-sidebar"></div>

</div>

</div>

<script type="text/javascript">

window.jQuery || document.write('<script src="js/jquery.js"><\/script>');

</script>

<script src="js/index.js"></script>

</body>

</html>

//上述为html文件和css文件的代码

(function ($) {

//menu

function dropdown(elem){

var $elem=$(elem),

activeClass=$elem.data('active')+'-active';

$elem.hover(function(){

$elem.addClass(activeClass);

},function(){

$elem.removeClass(activeClass);

});

}

function Dropdown($elem,options){

this.$elem=$elem;

this.options=options;

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

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

this._init();

}

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');

}

}

'use strict';

//menu

var dropdown={};

$('.menu')

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

dropdown.loadOnce($(this),dropdown.buildMenuItem);

})


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

var html="";

if(data.length === 0) return;

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>'

}

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

};


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

var $this=$(this),

dataLoad=$this.data('load');

})

dropdown.loadOnce = function($elem,success){

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

if(!dataLoad) return;

if(!$elem.data('loaded')){

$elem.data('loaded',true);

$.getJSON(dataLoad).done(function(data){

if(typeof success ==='function') success($elem,data);

}) .fail(function(){

$elem.data('loaded',false);

});

}

};

//focus-category


$('#focus-category') .find('.dropdown')

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

dropdown.loadOnce($(this),dropdown.createCategoryDetails);

})

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

}

//setTimeout(function(){

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

//})

};

$.fn.extend({

dropdown:function(){

return this.each(function(){

dropdown(this);

});

}

});

// 带效果的显示和隐藏，css3实现方法

var css3 = {



        fade: { // 淡入淡出


        init: function($elem) {

        css3._init($elem, 'fadeOut');


        },

        show: function($elem) {

        css3._show($elem, 'fadeOut');


        },

        hide: function($elem) {

        css3._hide($elem, 'fadeOut');

        }

        },

        slideUpDown: { // 上下滚动

        init: function($elem) {

        $elem.height($elem.height());

        css3._init($elem, 'slideUpDownCollapse');


        },

        show: function($elem) {

        css3._show($elem, 'slideUpDownCollapse');


        },

        hide: function($elem) {

        css3._hide($elem, 'slideUpDownCollapse');

        }

        },

        slideLeftRight: { // 左右滚动

        init: function($elem) {

        $elem.width($elem.width());

        css3._init($elem, 'slideLeftRightCollapse');


        },

        show: function($elem) {

        css3._show($elem, 'slideLeftRightCollapse');


        },

        hide: function($elem) {

        css3._hide($elem, 'slideLeftRightCollapse');

        }

        },

        fadeSlideUpDown: { // 淡入淡出上下滚动

        init: function($elem) {

        $elem.height($elem.height());

        css3._init($elem, 'fadeOut slideUpDownCollapse');


        },

        show: function($elem) {

        css3._show($elem, 'fadeOut slideUpDownCollapse');


        },

        hide: function($elem) {

        css3._hide($elem, 'fadeOut slideUpDownCollapse');

        }

        },


        fadeSlideLeftRight: { // 淡入淡出左右滚动

        init: function($elem) {

        $elem.width($elem.width());

        css3._init($elem, 'fadeOut slideLeftRightCollapse');


        },

        show: function($elem) {

        css3._show($elem, 'fadeOut slideLeftRightCollapse');


        },

        hide: function($elem) {

        css3._hide($elem, 'fadeOut slideLeftRightCollapse');

        }

        }

    };

    css3._show = function($elem,className){

    show($elem,function(){

    $elem.off(transition.end) .one(transition.end,function(){

    $elem.data('status','shown') .trigger('shown');

    });

    $elem .show();

    setTimeout(function(){

    $elem.removeClass(className);

    },20);


    })

    }

})(jQuery);

上述为js文件的代码index.js

(function($) {

    'use strict'


    function Dropdown($elem, options) {

        this.$elem = $elem;

            this.options = options;

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

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

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

        // var self=this;

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

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

            // console.log(e.type);

        // });


        //this.$elem.hover(this.show, this.hide);注意this的指向问题修改如下

        // var self=this;

        // this.$elem.hover(function () {

        //     self.show();

        // }, function () {

        //     self.hide();

        // });


        // var self = this;


        // if (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));


        // }


        this._init();

    }


    Dropdown.DEFAULTS = {

        event: "hover",

        css3: true,

        js: true,

        animation: 'fade',

        delay: 0,

        active: 'dropdown'

    };

    Dropdown.prototype._init=function () {

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


        }

    }




    //作业部分代码修改

    // this.$elem.addClass(this.activeClass);

    //     this.$layer.showHide('show');

    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');

    }


    // var dropdown = new Dropdown();

    // var dropdown2 = new Dropdown();

    // var dropdown3 = new Dropdown();

    // dropdown.show();

    // dropdown.hide();







    // function dropdown(elem, options) {

    //     var $elem = $(elem),

    //         $layer = $elem.find('.dropdown-layer'),

    //         activeClass = $elem.data('active') + '-active';

    //     // $layer.showHide({

    //     //     css3: true,

    //     //     js: true,

    //     //     animation: 'slideUpDown'


    //     // });  //在这里传参，不方便，易于出错，应该在调用时传参。


    //     $layer.showHide(options);

    //     $elem.hover(function() {

    //         $elem.addClass(activeClass);

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

    //     }, function() {

    //         $elem.removeClass(activeClass);

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

    //     });


    // }


    // var defaults = {

    //     css3: true,

    //     js: true,

    //     animation: 'slideUpDown'

    // };


    $.fn.extend({

        dropdown: function(option) {

            return this.each(function() {

                

                var $this=$(this),

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

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

                // dropdown(this, options);  

                if(!dropdown){//解决多次调用dropdown问题

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


                }  


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

                    dropdown[option]();


                }


            });


        }

    });



})(jQuery);

上述为dropdown.js的代码

上述代码我都复制进去以后，网页没有报错，但是右侧隐藏的内容为什么显示不出来呢？这个是什么原因呢

写回答

1回答

好帮手慕久久

2020-10-18

已采纳

同学你好，问题解答如下：

1. 鼠标移入focus-category，元素不显示，是因为没有调用dropdown方法，dropdown只有先调用，才能执行它里面的代码，如下：

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

另外，dropdown-layer的初始样式要设置成隐藏的：

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

同时，index.js中，还需要引入依赖的其他js文件：

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

这样修改后，鼠标移入，就能显示出来了：

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

2. 由于index.js中，需要使用showHide方法，而showHide方法是在showhide.js中，因此需要在index.js之前引入showhide.js文件；由于showHide方法，需要使用transition.js文件中的内容，因此还需在showhide.js之前引入transition.js，这样文件之间就相互关联起来了：

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

祝学习愉快！

0

0 学习 · 14456 问题

查看课程

相似问题

商品分类栏的隐藏部分内容显示不出来

回答 1

为什么没有hover效果，loading图片也不显示呢？

回答 2

1-3商品分类样式

回答 2

老师这个部分如何理解？

回答 2

导航列表的颜色为什么没有变呢。。

回答 3

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