体系课

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

为什么 $.getJSON 没有作用？已使用wamp

来源：3-5 下拉菜单的按需加载

Carol246

2019-09-01 21:11:12

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>慕淘网</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 头部 -->
    <header class="header">
        <div class="container">
            <!-- 头部-导航栏 -->
            <nav class="header__nav">
                <div class="header__nav__left">
                    <a href="javascript:;" class="header__nav__left-item header__nav__left-item-login">亲，请登录</a>
                    <a href="javascript:;" class="header__nav__left-item link">免费注册</a>
                    <a href="javascript:;" class="header__nav__left-item link">手机逛慕淘</a>
                </div>
                <div class="header__nav__right">
                    <div class="header__nav__right-item nav dropdown" data-active="nav" data-load="dropdown.json">
                        <a href="javascript:;" class="header__nav__right-item__text dropdown__toggle link">我的慕淘<i class="dropdown__toggle__arrow icon transition">&#xe609;</i></a>
                        <div class="dropdown__layer dropdown__layer_position_left">
                            <a href="javascript:;" class="dropdown__layer__loading"></a>
                            <!-- <a href="javascript:;" class="dropdown__layer-item">已买到的宝贝</a>
                            <a href="javascript:;" class="dropdown__layer-item">我的足迹</a> -->
                        </div>
                    </div>
                    <div class="header__nav__right-item nav dropdown" data-active="nav">
                        <a href="javascript:;" class="header__nav__right-item__text dropdown__toggle link">收藏夹<i class="dropdown__toggle__arrow icon transition">&#xe609;</i></a>
                        <div class="dropdown__layer dropdown__layer_position_left">
                            <a href="javascript:;" class="dropdown__layer-item">收藏的宝贝</a>
                            <a href="javascript:;" class="dropdown__layer-item">收藏的店铺</a>
                        </div>
                    </div>
                    <div class="header__nav__right-item">
                        <a href="javascript:;" class="header__nav__right-item__text header__nav__right-item-link link">商品分类</a>
                    </div>
                    <div class="header__nav__right-item nav dropdown" data-active="nav">
                        <a href="javascript:;" class="header__nav__right-item__text dropdown__toggle link">卖家中心<i class="dropdown__toggle__arrow icon transition">&#xe609;</i></a>
                        <div class="dropdown__layer dropdown__layer_position_left">
                            <a href="javascript:;" class="dropdown__layer-item">免费开店</a>
                            <a href="javascript:;" class="dropdown__layer-item">已卖出的宝贝</a>
                            <a href="javascript:;" class="dropdown__layer-item">出售中的宝贝</a>
                            <a href="javascript:;" class="dropdown__layer-item">卖家服务市场</a>
                            <a href="javascript:;" class="dropdown__layer-item">卖家培训中心</a>
                            <a href="javascript:;" class="dropdown__layer-item">体验中心</a>
                        </div>
                    </div>
                    <div class="header__nav__right-item nav dropdown" data-active="nav">
                        <a href="javascript:;" class="header__nav__right-item__text dropdown__toggle link">联系客服<i class="dropdown__toggle__arrow icon transition">&#xe609;</i></a>
                        <div class="dropdown__layer dropdown__layer_position_right">
                            <a href="javascript:;" class="dropdown__layer-item">消费者客服</a>
                            <a href="javascript:;" class="dropdown__layer-item">卖家客服</a>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </header>
    <button id="btn-show">点我打开</button>
    <button id="btn-hide">点我关闭</button>


    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></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>


base.css

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
li{
    list-style-type: none;
}

common.css

/* 容器 */
    .container{
        width: 1200px;
        margin: 0 auto;
    }

/* 链接 */
    .link{
        color: #4d555d;
    }
    .link:hover{
        color: #f00;
    }

/* dropdown */
    .dropdown{
        position: relative;
    }
    .dropdown__toggle{
        position: relative;
        z-index: 2;
    }
    .dropdown__layer{
        display: none;
        position: absolute;
        z-index: 1;
    }
    .dropdown__layer_position_left{
        left: 0;
    }
    .dropdown__layer_position_right{
        right: 0;
    }

/*icon*/
    @font-face {
        font-family: "iconfont";
        src: url('../font/iconfont.eot?t=1477124206');
        /* IE9*/
        src: url('../font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */
        url('../font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url('../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*="-dropdown_status_active"] .dropdown__toggle__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;
    }

/* nav dropdown */
    .nav .dropdown__toggle__arrow{
        vertical-align: middle;
        display: inline-block;
        line-height: 1;
        margin-left: 5px;
    }
    .nav .dropdown__layer{
        border: 1px solid #cdd0d4;
        background-color: #fff;
        top: 43px;
    }
    .nav .dropdown__layer-item{
        display: block;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        color: #4d555d;
        white-space: nowrap;
    }
    .nav .dropdown__layer-item:hover{
        background-color: #f3f5f7;
    }
    .nav-dropdown_status_active .dropdown__toggle{
        background-color: #fff;
        color: #f00;
        border-left: 1px solid #cdd0d4;
        border-right: 1px solid #cdd0d4;
    }
    .nav-dropdown_status_active .dropdown__layer{
        /*display: block;*/
    }
    .nav .dropdown__layer__loading{
        display: block;
        width: 32px;
        height: 32px;
        padding: 30px;
        background: url('../img/loading.gif') center no-repeat;
    }

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

index.css

/* 头部 */
.header{
    width: 100%;
    background-color: #f3f5f7;
    font-size: 12px;
}
/* 头部-导航栏 */
.header__nav{
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #cdd0d4;
    padding: 0 15px;
}
.header__nav__left{
    float: left;
}
.header__nav__left-item{
    margin-right: 5px;
}
.header__nav__left-item-login{
    color: red;
}
.header__nav__right{
    float: right;
}
.header__nav__right-item{
    float: left;
}
.header__nav__right-item__text{
    display: block;
    height: 44px;
    padding: 0 12px;
    border-left: 1px solid #f3f5f7;
    border-right: 1px solid #f3f5f7;
}

transition.js

(function(){
    var transitionEndEventName = {
        transition: 'transitionend',
        WebkitTransition: 'webkitTransitionEnd',
        MozTransition: 'mozTransitionEnd',
        OTransition: 'oTransitionEnd'
    };
    var transitionEnd = '',
        isSupport = false;
    for(var name in transitionEndEventName){
        if(typeof(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($){
    var transition = window.mt.transition;

    function init($ele, callback){
        if($ele.is(':hidden')){
            $ele.data('status','hidden');
            if(typeof(callback) === 'function') callback();
        }else{
            $ele.data('status','shown');
        }
    }
    function show($ele, callback){
        if($ele.data('status') === 'show') return;
        if($ele.data('status') === 'shown') return;
        $ele.data('status','show').trigger('show');
        callback();
    }
    function hide($ele, callback){
        if($ele.data('status') === 'hide') return;
        if($ele.data('status') === 'hidden') return;
        $ele.data('status','hide').trigger('hide');
        callback();
    }

    var silent = {
        init: init,
        show: function($ele){
            show($ele, function(){
                $ele.show();
                $ele.data('status','shown').trigger('shown');
            })
        },
        hide: function($ele){
            hide($ele, function(){
                $ele.hide();
                $ele.data('status','hidden').trigger('hidden');
            })
        }
    };
    var css3 = {
        fade: {
            init: function($ele){
                css3._init($ele, 'fadeOut');
            },
            show: function($ele){
                css3._show($ele, 'fadeOut');
            },
            hide: function($ele){
                css3._hide($ele, 'fadeOut');
            }
        },
        slideUpDown: {
            init: function($ele){
                $ele.height($ele.height());
                css3._init($ele, 'slideUpDownCollapse');
                
            },
            show: function($ele){
                css3._show($ele, 'slideUpDownCollapse');
            },
            hide: function($ele){
                css3._hide($ele, 'slideUpDownCollapse');
            }
        },
        slideLeftRight: {
            init: function($ele){
                $ele.width($ele.width());
                css3._init($ele, 'slideLeftRightCollapse');
                
            },
            show: function($ele){
                css3._show($ele, 'slideLeftRightCollapse');
            },
            hide: function($ele){
                css3._hide($ele, 'slideLeftRightCollapse');
            }
        },
        fadeSlideUpDown: {
            init: function($ele){
                $ele.height($ele.height());
                css3._init($ele, 'fadeOut slideUpDownCollapse');
                
            },
            show: function($ele){
                css3._show($ele, 'fadeOut slideUpDownCollapse');
            },
            hide: function($ele){
                css3._hide($ele, 'fadeOut slideUpDownCollapse');
            }
        },
        fadeSlideLeftRight: {
            init: function($ele){
                $ele.width($ele.width());
                css3._init($ele, 'fadeOut slideLeftRightCollapse');
                
            },
            show: function($ele){
                css3._show($ele, 'fadeOut slideLeftRightCollapse');
            },
            hide: function($ele){
                css3._hide($ele, 'fadeOut slideLeftRightCollapse');
            }
        }
    };
    css3._init = function($ele, className){
        $ele.addClass('transition');
        init($ele, function(){
            $ele.addClass(className);
        });
    };
    css3._show = function($ele, className){
        show($ele, function(){
            $ele.show();
            $ele.off(transition.end).one(transition.end, function(){
                $ele.data('status','shown').trigger('shown');
            });
            setTimeout(function(){
                $ele.removeClass(className);
            },0)
        })
    };
    css3._hide = function($ele, className){
        hide($ele, function(){
            $ele.off(transition.end).one(transition.end, function(){
                $ele.hide();
                $ele.data('status','hidden').trigger('hidden');
            });
            $ele.addClass(className);
        })
    };
    var js = {
        fade: {
            init: function($ele){
                js._init($ele);
            },
            show: function($ele){
                js._show($ele, 'fadeIn');
            },
            hide: function($ele){
                js._hide($ele, 'fadeOut');
            }
        },
        slideUpDown: {
            init: function($ele){
                js._init($ele);
            },
            show: function($ele){
                js._show($ele, 'slideDown');
            },
            hide: function($ele){
                js._hide($ele, 'slideUp');
            }
        },
        slideLeftRight: {
            init: function($ele){
                js._customInit($ele, ['width', 'padding-left', 'padding-right']);
            },
            show: function($ele){
                js._customShow($ele);
            },
            hide: function($ele){
                js._customHide($ele);
            }
        },
        fadeSlideUpDown: {
            init: function($ele){
                js._customInit($ele, ['opacity', 'height', 'padding-top', 'padding-bottom']);
            },
            show: function($ele){
                js._customShow($ele);
            },
            hide: function($ele){
                js._customHide($ele);
            }
        },
        fadeSlideLeftRight: {
            init: function($ele){
                js._customInit($ele, ['opacity', 'width', 'padding-left', 'padding-right']);
            },
            show: function($ele){
                js._customShow($ele);
            },
            hide: function($ele){
                js._customHide($ele);
            }
        }
    };
    js._init = function($ele, callback){
        $ele.removeClass('transition');
        init($ele, callback);
    };
    js._customInit = function($ele, optionsArr){
        var styles = {},
            cssArg = {};
        for(var k in optionsArr){
            styles[optionsArr[k]] = $ele.css(optionsArr[k]);
            cssArg[optionsArr[k]] = 0;
        }
        $ele.data('styles', styles);
        js._init($ele, function(){
            $ele.css(cssArg);
        });
    };
    js._show = function($ele, mode){
        show($ele, function(){
            $ele.stop()[mode](function(){
                $ele.data('status', 'shown').trigger('shown');
            });
        })
    };
    js._customShow = function($ele){
        show($ele, function(){
            $ele.show();
            $ele.stop().animate($ele.data('styles'), function(){
                $ele.data('status', 'shown').trigger('shown');
            });
        });
    };
    js._hide = function($ele, mode){
        hide($ele, function(){
            $ele.stop()[mode](function(){
                $ele.data('status', 'hidden').trigger('hidden');
            });
        })
    };
    js._customHide = function($ele){
        hide($ele, function(){
            var animateArg = {};
            for(var k in $ele.data('styles')){
                animateArg[k] = 0;
            }
            $ele.stop().animate(animateArg, function(){
                $ele.hide();
                $ele.data('status', 'hidden').trigger('hidden');
            });
        });
    };

    var defaults = {
        css3: false,
        js: false,
        animation: 'fade'
    };
    function showHide($ele, 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($ele);
        return {
            show: $.proxy(mode.show, this, $ele),
            hide: $.proxy(mode.hide, this, $ele)
        };
    }
    // window.mt = window.mt || {};
    // window.mt.showHide = showHide;

    $.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]();
                }
            });
        }
    });

})(jQuery);

dropdown.js

(function($){
    // 写法二：构造函数
    function Dropdown($ele, options){
        this.$ele = $ele;
        this.options = options;
        this.$layer = this.$ele.find('.dropdown__layer');
        this.activeClass = options.active + '-dropdown_status_active';

        this._init();        
    }
    Dropdown.prototype._init = function(){
        var self = this;

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

        this.$layer.on('show shown hide hidden', function(e){
            self.$ele.trigger('dropdown-' + e.type);
        });

        if(this.options.event === 'click'){
            this.$ele.click(function(e){
                self.show();
                e.stopPropagation();
            });
            $(document).click($.proxy(this.hide, this));
        }else{
            this.$ele.hover($.proxy(this.show, this), $.proxy(this.hide, this));
        }
    };
    Dropdown.prototype.show = function(){
        var self = this;
        function _show(){
            self.$ele.addClass(self.activeClass);
            self.$layer.showHide('show');
        }

        if(this.options.delay){
            this.timer = setTimeout(function(){
                _show();
            }, this.options.delay);
        }else{
            _show();
        }
        
    };
    Dropdown.prototype.hide = function(){
        clearTimeout(this.timer);
        this.$ele.removeClass(this.activeClass);
        this.$layer.showHide('hide');
    };
    $.fn.extend({
        dropdown: function(option){
            this.each(function(){
                var $this = $(this);
                var dropdown = $this.data('dropdown');
                var options = $.extend({}, $(this).data(), typeof(option) === 'object' && option);
                if(!dropdown){
                    $this.data('dropdown', dropdown = new Dropdown($this, options));
                }
                if(typeof dropdown[option] === 'function'){
                    dropdown[option]();
                }    
            });
        }
    });
})(jQuery);

dropdown.json

[
    {
        "href": "javascript:;",
        "text": "已买到的宝贝"
    },
    {
        "href": "javascript:;",
        "text": "我的足迹"
    }
]

index.js

// 调用封装好的 dropdown 方法
$('.dropdown').dropdown({
    event: 'hover',   // hover或click
    delay: 200,
    css: true,
    js: true,
    animation: 'fadeSlideUpDown',
    // active: 'undefined'
});

// 通过暴露方法，自定义show、hide
$('#btn-show').click(function(){
    $('.dropdown').dropdown('show');
});
$('#btn-hide').click(function(){
    $('.dropdown').dropdown('hide');
});

// 按需加载
$('.dropdown').on('dropdown-show', function(){
    var $this = $(this);
    var dataLoad = $this.data('load');

    if(!dataLoad) return;

    if(!$this.data('loaded')){
        var $layer = $this.find('.dropdown__layer');
        var html = '';
        $.getJSON(dataLoad, function(data){
            // 模拟延迟
            setTimeout(function(){
                for(var i = 0; i < data.length; i++){
                    html += '<a href="' + data[i].href + '" class="dropdown__layer-item">' + data[i].text + '</a>';
                }
                $layer.html(html);
                $this.data('loaded', true);
            }, 1000)
            
            // console.log(1);
        });
    }
});


写回答

5回答

好帮手慕慕子

2019-09-03

同学你好， 因为按需加载后， 没有更新下拉层的样式， 所以效果不对哦

因为按需加载是用户的行为，所以我们可以提供一个方法，它的作用是更新当前下拉层的宽和高，当用户按需加载完成内容后，手动调用这个方法更新下拉层的宽和高。 可以参考如下步骤测试

  1. 在showdown.js的_init下使用一个回调函数，更新下拉层的样式

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

  2. index.js中调用传入的函数

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

如果帮助到了你， 欢迎采纳！

祝学习愉快~~~

1
harol246
h 老师，只有第一次的样式正确额，后面的样式又不对了……而且第一个图片是什么意思呀？为什么要设置两遍 height 和 width？没有理解呃……self.$layer.height('auto') .height(self.$layer.height()) .width('auto') .width(self.$layer.width());
h019-09-03
共1条回复

好帮手慕慕子

2019-09-03

同学你好， 老师这边测试是没有问题， 可能是浏览器缓存导致效果没有生效哦， 可以清除浏览器缓存在测试一下。示例：

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

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

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

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

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

第一图片就是设置一个回调函数， 在请求到json数据后，将拼接的html结构添加到页面后调用这个函数更新下拉层的宽高。 第一遍将下拉层高度设置为auto， 让其由填充的内容撑开，然后在获取到填充内容后的高度， 赋值给下拉层，让其在页面中显示正常。 可以参考下图理解

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

如果帮助到了你， 欢迎采纳！

祝学习愉快~~~

0
harol246
h 还是不行呃……我把我的代码上传了再提问一次吧，谢谢老师！
h019-09-03
共1条回复

Carol246

提问者

2019-09-03

清除了缓存果然好了……但是为什么 dropdown__layer 的样式不对呢？

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

0

好帮手慕慕子

2019-09-02

同学你好， 首先对于同学能够自己发现并解决问题，给你点个赞，然后我们再来分析同学的问题

  1. 因为直接写成dropdown.json是从跟目录下访问， 也就是dropdown.json需要与html文件同级，所以需要改成js/dropdown.json 才可以直接访问到

  2. 老师测试同学的代码， 是可以加载到json文件的数据， 示例

    （1）修改json文件数据

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

    （2）在页面中查看效果

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

    由于浏览器有缓存， 所以有时候可能刷新没有实现效果， 建议：同学可以清除浏览器缓存试试

如果帮助到了你， 欢迎采纳！

祝学习愉快~~~~

0

Carol246

提问者

2019-09-01

把 html 中的  data-load="dropdown.json" 改成  data-load="js/dropdown.json" 就能执行了……但是为什么呀？这个值是在 index.js 中用到的，但 index.js 和 dropdown.json 是同级的呀？而且这样还是有问题，在 json 文件内容修改后，刷新后的页面上还是原来的 json 数据……

0

0 学习 · 14456 问题

查看课程

相似问题

既然用了jquery为什么不用里面的方法

回答 2

回答 2

为什么要用引号

回答 3

回答 5

use strict的作用

回答 2

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