体系课

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

请老师解答几个问题，谢谢。

来源：3-5 自由编程

qq_慕移动3101913

2019-12-24 15:35:35

1：为什么我的卖家中心只有加载图片，没有下拉菜单出现，在服务器中测试也不行

2：购物车鼠标移入内容时背景就变成红色，怎么才能保持是白色，当鼠标移开内容，才是恢复红色呢？

3：怎么用json引入购物车下拉内容，没有头绪。

4：有报错，不知道哪里有问题，谢谢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/commom.css" />
    <link rel="stylesheet" href="css/index.css" />
</head>

<body>
    <!-- 顶部导航开始 -->
    <div class="nav">
        <!-- 固定宽度 -->
        <div class="wrap">
            <ul class="fl">
                <li class="fl"><a href="javascript:;" class="nav-login">亲，请登录</a></li>
                <li class="fl"><a href="javascript:;" class="nav-signup link">免费注册</a></li>
                <li class="fl"><a href="javascript:;" target="_blank" class="nav-mobile link">手机逛慕淘</a></li>
            </ul>
            <ul class="fr">
                <!--第一个下拉菜单（我的慕淘）-->
                <li class="fl menu dropdown" data-active="menu">
                    <a href="###" target="_blank" class="link dropdown-toggle transition">我的慕淘<i class="dropdown-arrow icon transition">&#xe629;</i></a>
                    <ul class="fl dropdown-layer dropdown-left">
                        <li><a href="javascript:;" target="_blank" class="menu-item">已买到的宝贝</a></li>
                        <li><a href="javascript:;" class="menu-item">我的足迹</a></li>
                    </ul>
                </li>
                 <!--第二个下拉菜单（收藏夹）-->
                <li class="fl menu dropdown" data-active="menu">
                    <a href="###" target="_blank" class="link dropdown-toggle transition">收藏夹<i class="dropdown-arrow icon transition">&#xe629;</i></a>
                    <ul class="dropdown-layer">
                        <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="link dropdown-category">商品分类</a>
                </li>
                <!--第四个下拉菜单，卖家中心-->
                <li class="fl menu dropdown" data-active="menu" data-load="js/dropdown-seller.json">
                    <a href="###" target="_blank" class="link dropdown-toggle transition">卖家中心<i class="dropdown-arrow icon transition">&#xe629;</i></a>
                    <ul class="dropdown-layer">
                        <li class="dropdown-loading"></li>
                    </ul>
                </li>
                <!--第五个下拉菜单，联系客服-->
                <li class="fl menu dropdown nav-category" data-active="menu">
                    <a href="###" target="_blank" class="link dropdown-toggle transition">联系客服<i class="dropdown-arrow icon transition">&#xe629;</i></a>
                    <ul class="dropdown-layer dropdown-rigth">
                        <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>

    <!-- 头部区结构 -->
    <div class="header">
        <div class="wrap">
            <h1 class="fl"><a href="./dirSir.html" class="header-logo text-hidden">慕课网</a></h1>
            <div id="header-search" class="search fl">
                <!-- action 属性规定当提交表单时，向何处发送表单数据。 -->
                <form action="https://s.taobao.com/search" class="search-form">
                    <input type="text" name="q" placeholder="灵魂美食一元抢" autocomplete="off" class="search-inputbox fl">
                    <!-- autocomplete 属性规定表单是否应该启用自动完成功能。 -->
                    <input type="submit" value="搜索" class="search-btn btn fl">
                </form>
                <ul class="search-layer">
                    <!-- <li class="search-layer-item text-ellipsis">111</li>
                <li class="search-layer-item text-ellipsis">111</li>
                <li class="search-layer-item text-ellipsis">111</li> -->
                </ul>
            </div>
            <div class="car dropdown fr">
                <div class="car-btn" data-active="car">
                    <i class="car-logo icon">&#xe50d;</i>
                    <span class="car-name">购物车</span>
                    <span class="car-num">18<i class="dropdown-arrow icon transition">&#xe629;</i></span>
                </div>
                <ul class="car-layer" data-load="js/car.json">
                    <li class="car-layer-list text-ellipsis">最新加入的商品</li>
                    <li>
                        <ul class="car-layer-one">
                            <li class="car-layer-item text-ellipsis">
                                <i class="car-layer-logo"></i>
                                <span class="car-layer-nameUp">adidas 阿迪达斯 训练 男子</span>
                                <span class="car-layer-nameDown">￥335 x 1</span>
                                <i class="car-layer-ico">X</i>
                            </li>
                            <li class="car-layer-item text-ellipsis">
                                <i class="car-layer-logo"></i>
                                <span class="car-layer-nameUp">adidas 阿迪达斯 训练 男子</span>
                                <span class="car-layer-nameDown">￥335 x 1
                                </span>
                                <i class="car-layer-ico">X</i>
                            </li>
                            <li class="car-layer-item text-ellipsis">
                                <i class="car-layer-logo"></i>
                                <span class="car-layer-nameUp">adidas 阿迪达斯 训练 男子</span>
                                <span class="car-layer-nameDown">￥335 x 1</span>
                                <i class="car-layer-ico">X</i>
                            </li>
                            <li class="car-layer-item text-ellipsis">
                                <i class="car-layer-logo"></i>
                                <span class="car-layer-nameUp">adidas 阿迪达斯 训练 男子</span>
                                <span class="car-layer-nameDown">￥335 x 1</span>
                                <i class="car-layer-ico">X</i>
                            </li>
                            <li class="car-layer-item text-ellipsis">
                                <i class="car-layer-logo"></i>
                                <span class="car-layer-nameUp">adidas 阿迪达斯 训练 男子</span>
                                <span class="car-layer-nameDown">￥335 x 1</span>
                                <i class="car-layer-ico">X</i>
                            </li>
                            <li class="car-layer-item text-ellipsis">
                                <i class="car-layer-logo"></i>
                                <span class="car-layer-nameUp">adidas 阿迪达斯 训练 男子</span>
                                <span class="car-layer-nameDown">￥335 x 1</span>
                                <i class="car-layer-ico">X</i>
                            </li>
                            <li class="car-layer-item text-ellipsis">
                                <i class="car-layer-logo"></i>
                                <span class="car-layer-nameUp">adidas 阿迪达斯 训练 男子</span>
                                <span class="car-layer-nameDown">￥335 x 1</span>
                                <i class="car-layer-ico">X</i>
                            </li>
                            <li class="car-layer-item text-ellipsis">
                                <i class="car-layer-logo"></i>
                                <span class="car-layer-nameUp">adidas 阿迪达斯 训练 男子</span>
                                <span class="car-layer-nameDown">￥335 x 1</span>
                                <i class="car-layer-ico">X</i>
                            </li>
                        </ul>
                    </li>
                    <li class="car-layer-end text-ellipsis">共 0 件商品 共计￥0.00
                        <button class="car-layer-endBtn">去购物车</button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <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/search.js"></script>
    <script src="js/index.js"></script>
    <script src="js/car.js"></script>
</body>
</html>
/*css reset*/
    /*清除内外边距*/
    body,h1,h2,h3,h4,h5,h6,p,hr,/*结构元素*/
    ul,ol,li,dl,dt,dd,/*列表元素*/
    form,fieldset,legend,input,button,select,textarea,/*表单元素*/
    th,td,/*表格元素*/
    pre {
        padding: 0;
        margin: 0;
    }

/*重置默认样式*/
    body,button,input,select,textarea {
    /*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/
    color: #333;
    font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
}
h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
    font-weight: normal;
}

em,i {
    font-style: normal;
}
a {
    text-decoration: none;
}

li {
    list-style-type: none;
    vertical-align: top;
}

img {
    border: none;
    /*display: block;*/
    vertical-align: top;
}

textarea {
    overflow: auto;
    resize: none;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}
/*常用公共样式*/
    .wrap {
        width: 1200px;
        margin: 0 auto;
        /* overflow: hidden; */
    }

    .fl {
        float: left;
    }

    .fr {
        float: right;
    }

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

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

    /*隐藏文字 */
    .text-hidden{
        text-indent: -9999px;  
        overflow: hidden;
    }
    /* 文字溢出省略号隐藏 */
    .text-ellipsis{
        text-overflow: ellipsis;
        white-space: nowrap;    /*强制不换行 */
        overflow: hidden;
    }
/* dropdown */
/* 下拉菜单公共样式 */
    .dropdown {
        position: relative;
    }

    .dropdown-toggle {
        position: relative;
        z-index: 4;
    }
    .dropdown-arrow {
        display: inline-block;
        line-height: 1;
        vertical-align: middle;/* 下拉图标居中对齐 */
    }
    .dropdown-layer {
        display: none;
        position: absolute;
        z-index: 3;
    }

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

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


/* icon */
@font-face {font-family: "iconfont";
    src: url('../font/iconfont.eot?t=1577073756678'); /* IE9 */
    src: url('../font/iconfont.eot?t=1577073756678#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANMAAsAAAAAB0QAAAMAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCJIIPATYCJAMMCwgABCAFhG0HQBtfBiMRVns02V8d8CbWVU6rRRUYAUNwoWlvtfEcnQgwevgz//Hb9CLBfI6gHCP3kjyiQ1I/7xlLilF4VK1yFbLCtMKgA5QEbmOCDtcQwfGaDb/u/aAjmC9d/RVwZYLffXlUyYtrSqsMbekCYHOu2q9RsU8jOfvk0Q5TGGWXZVSYuj7P5fSm+Px2di7XWNvGpDYe9QKMAwpsT+pFR1ZAJagNYzcRNMT7BGp1mxSLy5uHWAGWBeLqpQunOBNSGlpDtVBZsbeIRxii6vQA91TxkH8+PqmpoJBUZGDt7vmls/4N8+uIb6CNICUw5ukSMA6RMYlCHK9MHcOoMimr9Rzye6lUhDRVHkW5yXdUwj88kiAqgeZ6MKoEkosyY5nE21mu+pEMKlFwEkSXFFZwBhaD53G5xgwQuTfNLSJ0ecivrhsC5yqB3DzsG7v7a3D7eGgePd3FckRg3XoncCp29zSGi4lgGvhGcHs4iPw0sNkcsM0nOr3eLxSiyVqUTnP9/KT5n/z0BzAJNfu0CzPIGmofFPc6oAS6nWKvHcIY1l53r3jQHhSgUv8huBbkz3BCff15/C7s0eByVOxXYZcFvdZkcPjof1MbmW3nOtiSYxEkpMWOeBACWRqAfDO9/IDv+PX/VM2aoK/V9AKeNxTkgaJbI9USnc2v29yxr/hWEM7FNWFTmMm2T72cUOtn/Qe5Vq+H+zpuqRaqdSRIqnQhqzZIFnYSFepMo1K1GdSasHK4TpvbKEoNxt2REJo9RtLoCbJmz8jCvkKFTl9QqTnwqHUk+GfWGY5rr2+MhWAN5Q6+osGgqGjR+kY7dwWnrZz7I08+D3EQ5esvHJCn2DAtNhExYJh6eEqPYdcRjEwNVhI4kTENQ1OlU1BRr7QbYyFYQ7mDr2gwdLjowvvfaOeu4AZNT/lHnvz4EAdRB/LlGjppbuWVabGJiAHD1MNTSmAHKwRj9awGKwncgNKYhsog09UVLO/p3+8IGAwNWI8PHBaPJWD0WVqHrGBmUw+W5nWuHMZKAQ==') format('woff2'),
    url('../font/iconfont.woff?t=1577073756678') format('woff'),
    url('../font/iconfont.ttf?t=1577073756678') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('../font/iconfont.svg?t=1577073756678#iconfont') format('svg'); /* iOS 4.1- */
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 14px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
    
    
    .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;
    }
/*showhide*/
    .fadeOut {
        visibility: hidden !important;    /*!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;
    }

/*.menu .dropdown*/
    /* 下拉菜单独有样式 */
    .menu .dropdown-toggle {
        display: block;
        height: 100%;
        padding: 0 13px 0 12px;
        border-left: 1px solid #f3f5f7;
        border-left: 1px solid #f3f5f7;
    }

    .menu .dropdown-arrow {
        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;
    }
    .car-active .dropdown-toggle{
        background-color: #fff;
        border-color: #cdd0d4;
    }
/*btn*/
    /* .btn {
        display: inline-block;
        border: none;
        color: #fff;
        text-align: center;
    } */

/*search*/
    .search {
        position: relative;
        border: 1px solid #cfd2d5;
    }
    .search-inputbox {
        width: 585px;
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        background-color: #fff;
        border: none;
    }
    .search-btn {
        width: 73px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        background-color: #07111b;
        border: none;
        color:#fff;
        text-align: center;
        cursor: pointer;
    }
    .search-layer {
        display: none;
        position: absolute;
        top: 100%;
        left: -1px;
        width: 100%;
        background-color: #fff;
        border: 1px solid #cfd2d5;
    }
    .search-layer-item {
        height: 24px;
        line-height: 24px;
        padding: 0 10px;
        cursor: pointer;
    }
    .search-layer-item:hover{
        background-color: #f3f5f7;
    }
   

    /* car */
    .car-btn .dropdown-arrow {
        padding-left: 5px;
    }
    .car-layer{
        display: none;
        width: 305px;
        /* height: 468px; */
        position: absolute;
        top: 43px;
        right: 0;
        background-color: #fff;
        border: 1px solid #cdd0d4;
        cursor: pointer;
        box-shadow:0 0 5px rgba(81, 81,81,0.4);
    }
    .car-layer-one{
        height: 357px;
        overflow-y: scroll;
        overflow-X: hidden;
    }
    .car-layer-list{
        height: 45px;
        line-height: 45px;
        text-align: left;
        font-weight: bold;
        font-size: 14px;
        text-indent: 12px;
        margin: 0 20px;
        /* border-bottom: 1px solid #cdd0d4; */
    }
    .car-layer-end{
        text-align: left;
        font-weight: bold;
        font-size: 14px;
        height: 73px;
        line-height:73px;
        margin: 0 20px 0 32px;
        position: relative;
    }
    .car-layer-endBtn{
        width: 83px;
        height: 38px;
        background-color: #f01414;
        border-radius: 2px;
        border: none;
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -19px;
        color: #fff;
        font-weight: bold;
    }
    .car-layer-item {
        height: 68px;
        line-height: 64px;
        margin: 0 20px;
        cursor: pointer;
        border-top: 1px solid #cdd0d4;
        position: relative;
        overflow: hidden;
    }

    .car-btn:hover{
        box-shadow:0 0 5px rgba(81, 81,81,0.4);
        background-color: #fff;
        height: 44px;
    }
    .car-btn:hover .car-name{
        /*链接经过颜色*/
        color: #f01414 !important;
    }
    .car-btn:hover .car-logo{
        /*链接经过颜色*/
        color: #f01414 !important;
    }
    .car-btn:hover .car-num{
        /*链接经过颜色*/
        color: #f01414 !important;
    }

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

    .car-layer-logo{
        width: 60px;
        height: 52px;
        background: url(../img/cart/1.png) center no-repeat;
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -26px;
        /* float: left;
        margin-top: 8px; */
    }

    .car-layer-nameUp{
        display:inline-block;
        /* width: 130px; */
        height: 30px;
        line-height: 30px;
        position: absolute;
        top: 8px;
        left: 70px;
        /* background-color: aquamarine; */
    }
    .car-layer-nameDown{
        display:inline-block;
        width: 130px;
        height: 30px;
        line-height: 30px;
        position: absolute;
        top: 31px;
        left: 70px;
        font-weight: bold;
    }
    .car-layer-ico{
        display:inline-block;
        width: 25px;
        height: 25px;
        line-height: 25px;
        /* background-color: #f01414; */
        position: absolute;
        top:9px;
        left: 234px;
    }
/* nav-顶部 */
    .nav {
        width: 100%;
        background-color: #f3f5f7;
    }

    .nav .wrap {
        height: 44px;
        line-height: 44px;
        border-bottom: 1px solid #cdd0d4;
    }

    .nav .dropdown-category{
        margin: 0 10px;
    }

    .nav-login {
        color: #f01414;
        margin-left: 15px;
    }

    .nav-signup {
        margin-left: 10px;
    }

    .nav-mobile {
        margin-left: 10px;
    }


    /* header-头部 */
    .header{
        width: 100%;
        height: 124px;
        background-color: #f3f5f7;
    }

    .header-logo,
    .header .search,
    .header .car{
        margin-top: 36px;
    }

    .header-logo{
        display: block;
        width: 136px;
        height: 48px;
        background: url(../img/header-logo.png) no-repeat;
        margin-left: 15px;
    }

    .header .search{
        margin-left: 145px;
    }

    .car{
        margin-right: 15px;
        position: relative;
    }
    .car-btn{
        position: relative;
        width: 160px;
        height: 45px;
        background-color: #f01414;
        cursor: pointer;
        z-index: 2;
    }

    .car-logo{
        float: left;
        padding-left: 15px;
        height: 45px;
        line-height: 45px;
        font-size: 21px;
        color: #fff;
        -webkit-text-stroke-width: 0px;
    }
    .car-name{
        float: left;
        padding-left: 12px;
        height: 45px;
        line-height: 45px;
        font-size: 14px;
        color: #fff;
    }
    .car-name:after{
        content: '|'!important;
        margin: 0 10px;
        font-weight: lighter;
        font-size: 16px;
    }
    .car-num{
        width: 30px;
        height: 45px;
        line-height: 45px;
        color: #fff;
        font-size: 14px;
    }
$(document).ready(function(){
    $('.dropdown').hover(function(){
        var $carBtn = $(this);

        $carBtn.find('.car-layer').show();
    },function(){
        var $carBtn = $(this);
        
        $carBtn.find('.car-layer').hide();;
    });

});


[
    {
        "url": "###",
        "name": "免费开店"
    },
    {
        "url": "###",
        "name": "已卖出的宝贝"
    },
    {
        "url": "###",
        "name": "出售中的宝贝"
    },
    {
        "url": "###",
        "name": "卖家服务市场"
    },
    {
        "url": "###",
        "name": "卖家培训中心"
    },
    {
        "url": "###",
        "name": "体验中心"
    }
]
(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",
        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');
    }

    $.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);
//做具体事件带代码
(function ($) {

    //menu
    $(".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);
                    });
                }
            });


    //header-search
    var $headerSearch = $('#header-search');    //获取元素
    var html = '',
        maxNum = 10;

        // 获得数据处理
        $headerSearch.on('search-getData', function(e, data) {
            var $this = $(this);
            html = createHeaderSearchLayer(data, maxNum);
            $this.search('appendLayer', html);

            // 将生成的html呈现在页面中
            if (html) {
                $this.search('showLayer');
            } else {
                $this.search('hideLayer');
    
            }
        }).on('search-noData', function(e) {
            // 没获得数据处理
            $(this).search('hideLayer').search('appendLayer', '');
        }).on('click', '.search-layer-item', function() {   //下拉层绑定点击事件
            // 点击每项时，提交
            $headerSearch.search('setInputVal', $(this).html());
            $headerSearch.search('submit');
        });


    $headerSearch.search({     //searc调用
        autocomplete: true,   //autocomplete 属性规定输入字段是否应该启用自动完成功能
        css3: false,
        js: false,
        animation: 'fade'
    });


   // 获取数据，生成html（创建结构）
function createHeaderSearchLayer(data, maxNum) {
    var html = '',
        dataNum = data['result'].length;

    if(dataNum === 0){
        return '';
    }
    for (var i = 0; i < dataNum; i++) {
        if (i >= maxNum) break;
        html += '<li class="search-layer-item text-ellipsis">' + data['result'][i][0] + '</li>';
    }
    return html;

}

})(jQuery);
//做通用事情代码
(function($){


    //对象，构造函数
    function Search($elem, options) {
        this.$elem = $elem;
        this.options = options;

        this.$form = this.$elem.find('.search-form');
        this.$input = this.$elem.find('.search-inputbox');
        this.$layer = this.$elem.find('.search-layer');

        this.loaded = false;

         //事件代理绑定点击事件
        this.$elem.on('click', '.search-btn', $.proxy(this.submit, this));
        //$.proxy 方法接受一个已有的函数，并返回一个带特定上下文的新的函数。该方法通常用于向上下文指向不同对象的元素添加事件。
        
        //假如验证为真，则执行自动完成功能
        if (this.options.autocomplete) {
            this.autocomplete();
        }
    }
    Search.DEFAULTS = {
        autocomplete: false,    //autocomplete 属性规定输入字段是否应该启用自动完成功能
        url: 'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1484204931352_18291&callback=jsonp18292&k=1&area=c2c&bucketid=6&q=',  //往哪传
        css3: false,
        js: false,
        animation: 'fade'

    };
    //提交功能
    Search.prototype.submit = function() {
        //假如输入为空，则提交失败
        if (this.getInputVal() === '') {
            return false;
        }
        this.$form.submit();
    };
    //自动完成功能
    Search.prototype.autocomplete = function() {


        this.$input
            .on('input', $.proxy(this.getData, this))
            .on('focus', $.proxy(this.showLayer, this))
            .on('click', function() {
                return false;
            });
        this.$layer.showHide(this.options);

        //点击空白地方，隐藏下拉层
        $(document).on('click', $.proxy(this.hideLayer, this));
    };
    //获取数据
    Search.prototype.getData = function() {
        var self = this;
        var inputVal = this.getInputVal();
        if (inputVal == '') return self.$elem.trigger('search-noData');
        if (this.jqXHR) this.jqXHR.abort();
        this.jqXHR = $.ajax({
            url: this.options.url + inputVal,
            dataType: 'jsonp'
        }).done(function(data) {
            console.log(data);
            self.$elem.trigger('search-getData', [data]);
        }).fail(function() {
            self.$elem.trigger('search-noData');
        }).always(function() {
            self.jqXHR = null;
        });

    };
    //显示下拉层
    Search.prototype.showLayer = function() {
        // if (this.$layer.children().length === 0) return;
        if (!this.loaded) return;
        this.$layer.showHide('show');
    };
    //隐藏
    Search.prototype.hideLayer = function() {
        this.$layer.showHide('hide');
    };

    //封装getInputVal方法；获取值
    Search.prototype.getInputVal = function() {
        return $.trim(this.$input.val());
    };

    //封装setInputVal方法；设置值
    Search.prototype.setInputVal = function(val) {
        this.$input.val(removeHtmlTags(val));

        function removeHtmlTags(str) {
            return str.replace(/<(?:[^>'"]|"[^"]*"|'[^']*')*>/g, '');
        }
    };

    Search.prototype.appendLayer = function(html) {
        this.$layer.html(html);
        this.loaded = !!html;  //两个感叹号变布尔值
    };


    $.fn.extend({
        search: function(option,value) {


            return this.each(function() {

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

                if (!search) {
                    $this.data('search', search = new Search($this, options));

                }

                if (typeof search[option] === 'function') {
                    search[option](value);

                }

            });

        }
    });

})(jQuery)


写回答

4回答

好帮手慕言

2019-12-25

同学你好，关于同学的疑问，解答如下：
1、是想实现下方中的效果吗？
http://img1.sycdn.imooc.com/climg/5e02ccc40903fca503690207.jpg

如果是的话，那么，可以添加伪类把有阴影的部分遮盖住，可以参考下方的代码：
http://img1.sycdn.imooc.com/climg/5e02d6d8094a46a204010336.jpg

2、旋转不一致，是因为购物车小箭头设置的是padding-left，在旋转时会受到影响。

建议：将padding-left修改为margin-left就可以了。

http://img1.sycdn.imooc.com/climg/5e02d91009e045cd04160146.jpg

如果还有其他疑问，建议在问答区重新提问，便于后期查找总结

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

0

好帮手慕言

2019-12-24

同学你好，关于同学的疑问，解答如下：
1、下拉菜单是有的，如下：
http://img.mukewang.com/climg/5e01ebe5097e6ad104610261.jpg

2、把hover属性添加到类名为car的元素上。代码参考：
http://img.mukewang.com/climg/5e01edc00965087906710524.jpg

下面的代码可以去掉：

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

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

3、可以在标签上添加属性（比如data-load），在js中获取数据就可以了，在之前的课程中有过讲解，同学可以去复习下知识

4、测试同学提供的代码，控制台没有报错，如下：
http://img.mukewang.com/climg/5e01ef9309410e9916850776.jpg

同学可以放到wampserver服务器下测试。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

0
hq_慕移动3101913
h 老师。为什么我购物车的下拉箭头不是和上面箭头一样，上面是以中心点旋转，购物车是以左边旋转，旋转后下拉箭头距离18太近。
h019-12-24
共2条回复

qq_慕移动3101913

提问者

2019-12-24

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


0

qq_慕移动3101913

提问者

2019-12-24

(function($) {
    var transition = window.mt.transition; // transition兼容解决，transition.js

    // 提取init公共部分
    function init($elem, hiddenCallback) {

        if ($elem.is(':hidden')) {
            $elem.data('status', 'hidden');
            if (typeof hiddenCallback === 'function') hiddenCallback();

        } else {
            $elem.data('status', 'shown');
        }
    }

    // 提取show公共部分

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

        }
    };
    // 带效果的显示和隐藏，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._init = function($elem, className) {
        $elem.addClass('transition');
        init($elem, function() {
            $elem.addClass(className);

        });

    };

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


    };

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

        });

    }

    // 带效果的显示和隐藏，js实现方法
    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-bottom': 0
                });
            },
            show: function($elem) {
               
                js._customshow($elem);
            },
            hide: function($elem) {
               
                js._customHide($elem, {
                    'opacity': 0,
                    'height': 0,
                    'padding-top': 0,
                    'padding-bottom': 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'); // js和transition动画冲突，在执行js前，将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._customshow = function($elem) {
        var styles = $elem.data('styles');
        show($elem, function() {
            $elem.show();
            $elem.stop().animate($elem.data('styles'), function() {
                $elem.data('status', 'shown').trigger('shown');
            });
        });
    };

    js._customHide = function($elem, options) {
        hide($elem, function() {

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


    js._show = function($elem, mode) {
        show($elem, function() {
            $elem.stop()[mode](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');
            });
        });

    };

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

    function showHide($elem, options) {
        var mode = null;
        // options = $.extend({}, defaults, options);
        if (options.css3 && transition.isSupport) { //css3 transition
            // css3[options.animation].init($elem);
            mode = css3[options.animation] || css3[defaults.animation];
           
        } else if (options.js) { 
            mode = js[options.animation] || js[defaults.animation];
        } else { 
            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]();
                }
            });
        }
    });

})(jQuery);


0

0 学习 · 14456 问题

查看课程

相似问题

老师问个问题

回答 2

老师帮忙看一下为啥我请求json文件时会报这个错

回答 1

老师问2个问题

回答 9

老师省略了哪些代码没有写，如：实例化函数function Storage

回答 4

有几点存在的问题请老师看一下

回答 2

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