视频一开始的那部分，我的下拉菜单可以显示隐藏但是没有动画效果

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/index.css" />
</head>

<body>
    
    <div class="nav-site">
        <div class="container">
            <ul class="fl">
                <li class="fl"><a href="javascript:;" id="nav-site-signin" class="nav-site-login">亲，请登录</a></li>
                <li class="fl"><a href="javascript:;" id="nav-site-signup" class="nav-site-signup link">免费注册</a></li>
                <li class="fl"><a href="###" target="_blank" class="nav-site-mobile link">手机逛慕淘</a></li>
            </ul>
            <ul class="fr">
                <li class="menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link transition ">我的慕淘<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>
                </li>
                <li class="menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link transition">收藏夹<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>
                </li>
                <li class="fl">
                    <a href="###" target="_blank" class="nav-site-category link">商品分类</a>
                </li>
                <li class="menu dropdown fl" data-active="menu" data-load="js/dropdown-seller.json">
                    <a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心<i
                            class="dropdown-arrow icon transition"></i></a>
                    <ul class="dropdown-layer dropdown-left">
                        <li class="dropdown-loading"></li>
                        <li><a href="###" target="_blank" class="menu-item">免费开店</a></li>
                        <li><a href="###" target="_blank" class="menu-item">已卖出的宝贝</a></li>
                        <li><a href="###" target="_blank" class="menu-item">出售中的宝贝</a></li>
                        <li><a href="###" target="_blank" class="menu-item">卖家服务市场</a></li>
                        <li><a href="###" target="_blank" class="menu-item">卖家培训中心</a></li>
                        <li><a href="###" target="_blank" class="menu-item">体验中心</a></li>
                    </ul>
                </li>
                <li class="nav-site-service menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link transition">联系客服<i
                            class="dropdown-arrow icon transition"></i></a>
                    <ul class="dropdown-layer dropdown-right">
                        <li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
                        <li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    

    
    
    <script>
        //两种判断是否有jquery库的写法：
        // window.jQuery || document.write('<script src="js/jquery.js"><' + '/script>')
        window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
    </script>
    <script src="js/transition.js"></script>
    <script src="js/showHide.js"></script>
    <script src="js/dropdown.js"></script>
    <script src="js/index.js"></script>
</body>

</html>

common.css

/*公共样式*/

.container {
    /*站点导航*/
    width: 1200px;
    margin: 0 auto;
}

a.link {
    /*链接正常颜色*/
    color: #4d555d;
}

a.link:hover {
    /*链接经过颜色*/
    color: #f01414 !important;
}

/* showHide */
.fadeOut {
    visibility: hidden !important;
    opacity: 0 !important;
}

.slideUpDownCollapse {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.slideLeftRightCollapse {
    width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* dropdown */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    position: relative;
    z-index: 2;
}

.dropdown-arrow {
    display: inline-block;
    line-height: 1;
    /*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;
}

/*icon*/
@font-face {
    font-family: "iconfont";
    src: url('../test/font/iconfont.eot?t=1477124206');
    /* IE9*/
    src: url('../test/font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../test/font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */
    url('../test/font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('../test/font/iconfont.svg?t=1477124206#iconfont') format('svg');
    /* iOS 4.1- */
}

.icon {
    font-family: "iconfont" !important;
    font-size: 14px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -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;
}

.dropdown-loading {
    width: 32px;
    height: 32px;
    background: url(../img/loading.gif) no-repeat;
    margin: 20px;
}

/*.menu .dropdown*/

.menu .dropdown-toggle {
    display: block;
    height: 100%;
    padding: 0 13px 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: 5px;
}

.menu .dropdown-layer {
    top: 43px;
    background-color: #fff;
    border: 1px solid #cdd0d4;
}

.menu-item {
    display: block;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    color: #4d555d;
    white-space: nowrap;
}

.menu-item:hover {
    background-color: #f3f5f7;
}

.menu-active .dropdown-toggle {
    background-color: #fff;
    border-color: #cdd0d4;
}

index.css

/*nav-site*/
.nav-site{ /*站点导航整体设置*/
    width:100%;
    background-color: #f3f5f7;
}
.nav-site .container{  /*站点导航内容块整体设置*/
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #cdd0d4;
}
.nav-site-login{  /*站点导航“亲，请登陆”设置*/
    margin-left:15px;
    color:#f01414;
}
.nav-site-signup,
.nav-site-mobile{ /*站点导航“注册和手机购买”设置*/
    margin-left:10px;
}
.nav-site-category{
    margin:0 10px;
}

.nav-site-service{
    margin-right:15px;
}
/*下拉菜单样式dropdown*/
.dropdown{
    position: relative;
}
.dropdown-toggle{
    position: relative;
    z-index: 2;
    display:block;
    height: 100%;
    padding: 0 16px 0 12px;
    border-left: 1px solid #f3f5f7;
    border-right: 1px solid #f3f5f7;

}
.dropdown-arrow{
    display: inline-block;
    /*width:8px;
    height:6px;*/
    /*background: url(../img/dropdown-arrow.png) no-repeat;*/
    margin-left:8px;
    vertical-align: middle;

}
.dropdown-layer{
    display:none;
    position: absolute;
    top:43px;
    background-color:#fff;
    z-index: 1;
    border: 1px solid #cdd0d4;
}
.dropdown-left{
    left:0;
    right:auto;

}
.dropdown-right{
    right:0;
    left:auto;

}
.dropdown-item{
    display:block;
    height:30px;
    line-height:30px;
    padding:0 12px;
    color:#4d555d;
    white-space: nowrap;

}
.dropdown-item:hover{
    background-color: #f3f5f7;
}

/*下拉菜单通过js和css来实现dropdown*/

/*.dropdown-active .dropdown-toggle,
.dropdown:hover .dropdown-toggle{
    background-color:#fff;
    border-color:#cdd0d4;
}
.dropdown-active .dropdown-arrow,
.dropdown:hover .dropdown-arrow{
    background-image:url(../img/dropdown-arrow-active.png);
}

.dropdown-active .dropdown-layer,
.dropdown:hover .dropdown-layer{
    display:block;
}*/

transition.js

(function () {
    var transitionEndEventName = {
        transition: 'transitionend',
        MozTransition: 'transitionend',
        WebkitTransition: 'webkitTransitionEnd',
        OTransition: 'oTransitionEnd otransitionend',
    };
    var transitionEnd = '',
        isSupport = false;

    for (var name in transitionEndEventName) {
        if (document.body.style[name]!==undefined) {
            transitionEnd = transitionEndEventName[name];
            isSupport = true;
            break;
        }
    }

    window.mt = window.mt || {};
    window.mt.transition = {
        end: transitionEnd,
        isSupport: isSupport
    };
})();

showHide.js

(function ($) {
    // 'use strict';

    var transition = window.mt.transition;

    function init($elem, hiddenCallback) {
        if ($elem.is(':hidden')) { //hidden
            $elem.data('status', 'hidden');
            if (typeof hiddenCallback === 'function') hiddenCallback();
        } else { //shown
            $elem.data('status', 'shown');
        }
    }

    function show($elem, callback) {
        if ($elem.data('status') === 'show') return;
        if ($elem.data('status') === 'shown') return;
        $elem.data('status', 'show').trigger('show');
        callback();
    }

    function hide($elem, callback) {
        if ($elem.data('status') === 'hide') return;
        if ($elem.data('status') === 'hidden') return;
        $elem.data('status', 'hide').trigger('hide');
        callback();
    }

    var silent = {
        init: init,
        show: function ($elem) {
            show($elem, function () {
                $elem.show();
                $elem.data('status', 'shown').trigger('shown');
            });
        },
        hide: function ($elem) {
            hide($elem, function () {
                $elem.hide();
                $elem.data('status', 'hidden').trigger('hidden');
            });
        }
    };

    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._init = function ($elem, className) {
        $elem.addClass('transition');
        init($elem, function () {
            $elem.addClass(className);
        });
    };

    css3._show = function ($elem, className) {
        show($elem, function () {
            $elem.off('transitionend').one('transitionend', function () {
                $elem.data('status', 'shown').trigger('shown');
            });
            $elem.show();
            setTimeout(function () {
                $elem.removeClass(className);
            }, 20);
        });
    };

    css3._hide = function ($elem, className) {
        hide($elem, function () {
            $elem.off('transitionend').one('transitionend', function () {
                $elem.hide();
                $elem.data('status', 'hidden').trigger('hidden');
            });
            $elem.addClass(className);
        });
    };

    var js = {
        fade: {
            init: function ($elem) {
                js._init($elem);
            },
            show: function ($elem) {
                js._show($elem, 'fadeIn');
            },
            hide: function ($elem) {
                js._hide($elem, 'fadeOut');
            }
        },
        slideUpDown: {
            init: function ($elem) {
                js._init($elem);
            },
            show: function ($elem) {
                js._show($elem, 'slideDown');
            },
            hide: function ($elem) {
                js._hide($elem, 'slideUp');
            }
        },
        slideLeftRight: {
            init: function ($elem) {
                js._customInit($elem, {
                    'width': 0,
                    'padding-left': 0,
                    'padding-right': 0
                });
            },
            show: function ($elem) {
                js._customShow($elem);
            },
            hide: function ($elem) {
                js._customHide($elem, {
                    'width': 0,
                    'padding-left': 0,
                    'padding-right': 0
                });
            }
        },
        fadeSlideUpDown: {
            init: function ($elem) {
                js._customInit($elem, {
                    'opacity': 0,
                    'height': 0,
                    'padding-top': 0,
                    'padding-down': 0
                });
            },
            show: function ($elem) {
                js._customShow($elem);
            },
            hide: function ($elem) {
                js._customHide($elem, {
                    'opacity': 0,
                    'height': 0,
                    'padding-top': 0,
                    'padding-down': 0
                });
            }
        },
        fadeSlideLeftRight: {
            init: function ($elem) {
                js._customInit($elem, {
                    'opacity': 0,
                    'width': 0,
                    'padding-left': 0,
                    'padding-right': 0
                });
            },
            show: function ($elem) {
                js._customShow($elem);
            },
            hide: function ($elem) {
                js._customHide($elem, {
                    'opacity': 0,
                    'width': 0,
                    'padding-left': 0,
                    'padding-right': 0
                });
            }
        }
    };

    js._init = function ($elem, hiddenCallback) {
        $elem.removeClass('transition');
        init($elem, hiddenCallback);
    };

    js._customInit = function ($elem, options) {
        var styles = {};

        for (var p in options) {
            styles[p] = $elem.css(p);
        }
        $elem.data('styles', styles);

        js._init($elem, function () {
            $elem.css(options);
        });
    };

    js._show = function ($elem, mode) {
        show($elem, function () {
            $elem.stop()[mode](function () {
                $elem.data('status', 'shown').trigger('shown');
            });
        });
    };

    js._customShow = function ($elem) {
        show($elem, function () {
            $elem.show();
            $elem.stop().animate($elem.data('styles'), function () {
                $elem.data('status', 'shown').trigger('shown');
            });
        });
    };

    js._hide = function ($elem, mode) {
        hide($elem, function () {
            $elem.stop()[mode](function () {
                $elem.data('status', 'hidden').trigger('hidden');
            });
        });
    };

    js._customHide = function ($elem, options) {
        hide($elem, function () {
            $elem.stop().animate(options, function () {
                $elem.hide();
                $elem.data('status', 'hidden').trigger('hidden');
            });
        });
    };

    var defaults = {
        css3: false,
        js: false,
        animation: 'fade'
    };

    function showHide($elem, options) {
        var mode = null;

        if (options.css3 && transition.isSupport) { //css3 transition
            mode = css3[options.animation] || css3[defaults.animation];
        } else if (options.js) { //js animation
            mode = js[options.animation] || js[defaults.animation];
        } else { //no animation
            mode = silent;
        }

        mode.init($elem);
        return {
            show: $.proxy(mode.show, this, $elem),
            hide: $.proxy(mode.hide, this, $elem)
        }
    }

    $.fn.extend({
        showHide: function (option) {
            return this.each(function () {
                var $this = $(this),
                    options = $.extend({}, defaults, typeof option === 'object' && option),
                    mode = $this.data('showHide');

                if (!mode) {
                    $this.data('showHide', mode = showHide($this, options));
                }

                if (typeof mode[option] === 'function') {
                    mode[option]();
                }
            });
        }
    });

    // window.mt = window.mt || {};
    // window.mt.showHide = showHide;
})(jQuery);

dropdown.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._init();
    }
    Dropdown.DEFAULTS = {
        event: 'hover', //click
        css3: false,
        js: false,
        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') { //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({
        dropdown: function (option) {
            return this.each(function () {
                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);

index.js

$(".dropdown").dropdown({
css3: true,
js: false
});

Aurora_Meteor 2020-04-13

源自：实战：下拉菜单组件化 3-6 改写站点导航中的下拉菜单

收起

5回答

好帮手慕粉回答被采纳获得+3积分 2020-04-14 10:08:19

同学你好，老师又测试了下同学的代码，效果是正确的。关于同学的疑问如下：

1、跟着老师的视频写完以后，loading效果没有实现，是因为我们的数据是模拟服务器获取的，只有在网络不好，内容加载不出来的时候，才会显示loading图片，因为这个项目比较小，在网络速度也挺快的情况下，获取到了内容就不会再显示loading图片了。

2、不使用服务器，在本地打开，有loading图片，跟第一条是一样的，只有在没有获取到数据的时候，才会显示loading图片，在本地打开是加载不了json文件的，访问不到数据，所以才会显示loading图片。

3、这个延时只是视频老师为同学们演示loading效果，实际中不需要的话就注释掉了。

4、建议同学再听下课程。

祝学习愉快~

收起回答

提问者 Aurora_Meteor 2020-04-13 20:57:32

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/index.css" />
</head>

<body>

<div class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl"><a href="javascript:;" id="nav-site-signin" class="nav-site-login">亲，请登录</a></li>
<li class="fl"><a href="javascript:;" id="nav-site-signup" class="nav-site-signup link">免费注册</a></li>
<li class="fl"><a href="###" target="_blank" class="nav-site-mobile link">手机逛慕淘</a></li>
</ul>
<ul class="fr">
<li class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition ">我的慕淘<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>
</li>
<li class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">收藏夹<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>
</li>
<li class="fl">
<a href="###" target="_blank" class="nav-site-category link">商品分类</a>
</li>
<li class="menu dropdown fl" data-active="menu" data-load="js/dropdown-seller.json">
<a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心<i
class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li class="dropdown-loading"></li>

</ul>
</li>
<li class="nav-site-service menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">联系客服<i
class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-right">
<li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
</ul>
</li>
</ul>
</div>
</div>




<script>
//两种判断是否有jquery库的写法：
// window.jQuery || document.write('<script src="js/jquery.js"><' + '/script>')
window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
</script>
<script src="js/transition.js"></script>
<script src="js/showHide.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/index.js"></script>
</body>

</html>

(function ($) {

$(".dropdown").dropdown({

css3: true,
js: false

});

$('.dropdown').on('dropdown-show', function (e) {
var $this = $(this),
dataLoad = $this.data('load');

if (!dataLoad) return;

if (!$this.data('loaded')) {
var $layer = $this.find('.dropdown-layer'),
html = '';

$.getJSON(dataLoad, function (data) {
// console.log(1);
// 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>'
}
$layer.html(html);
$this.data('loaded', true);
// }, 1000);
});
}
});
})(jQuery);

收起回答

好帮手慕粉 2020-04-13 19:20:09

同学你好，建议同学将修改后的代码发上来呢：

老师不知道同学都进行了什么修改呢。

祝学习愉快~

收起回答

提问者 Aurora_Meteor #1

是只要index.js和index.html吧？我把代码在上面回复了您看一下

2020-04-13 20:57:18

好帮手慕粉 2020-04-13 18:35:38

同学你好，老师测试了同学的代码，发现index.js文件是缺少内容的，不知道是同学没有贴全还是没写，老师用的是源码里面的index.js文件测试的。然后要把index.html文件中的内容注释掉，使用json文件：

再测试代码效果就是正常的：

祝学习愉快~

收起回答

提问者 Aurora_Meteor #1

老师您没看清我的问题，我说的是这节视频刚开始的部分，那块还没有对index.js做很多修改的，老师视频里也是有动画的，但是我的没有。另外我在下面自己的回复中也说了最后跟着视频全部做完以后【这块地方我已经把html里的相应部分注释了的，index.js也做了修改的】，使用自己写的代码和源代码实验的不同结果，还是有不同的问题出现，麻烦您仔细看一下...

2020-04-13 19:01:18

提问者 Aurora_Meteor 2020-04-13 16:20:32

到最后我一步一步跟着老师做完以后，动画效果还是没有出现，而且那个【卖家中心】也没有loading图片，下面的菜单也不出来了，为什么啊文件也没有缺少的，控制台也不报错

收起回答

提问者 Aurora_Meteor #1

我把源代码这一节的代码放到phpstudy里以后，打开网页发现定时器已经被注释掉了，可是移到每个菜单上时，还是延迟一会才会出现动画，而且卖家中心不会出现那个loading图片；但是在本地直接打开的话就没有延迟，loading图片也可以显示，只是因为没有在服务器下获取不到卖家中心的下拉菜单。

2020-04-13 16:35:22