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

<!DOCTYPE html><html>

<head>

</head>

<body>

<li class="fl"><a href="javascript:;" target="_blank" class="nav-site-mobile link">手机逛慕淘</a></li>

</ul>

<li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>

</ul>

</li>

<li><a href="###" target="_blank" class="menu-item">收藏的宝贝</a></li>

</ul>

</li>

</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><a href="###" target="_blank" class="menu-item">消费者客服</a></li>

</ul>

</li>

</ul>

</div>

<input type="text" name="q" placeholder="一元抢"

autocomplete="off" class="search-inputbox fl">

</form>

<!--<li class="search-layer-item text-ellipsis">111</li>

</ul>

</div>

</div>

<!--<li class="dropdown-layer-title cart-layer-title">新加入的商品</li>

<span class="item-detail-up">adidas 阿迪达斯训练男子</span><br>

</div>

</li>

<span class="total-price fl">共<b>0</b>件商品共计<b>￥ 0.00</b></span>

</li>-->

</ul>

</div>

</div>

</div>

</div>

</li>

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

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

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

</div>

</div>

</li>

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

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

</div>

</div>

</li>

<a href="###" target="_blank" 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>

</div>

</div>

</li>

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

data-load=js/category-detail-5.json>

<a href="###" target="_blank" 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>

</div>

</div>

</li>

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

data-load=js/category-detail-6.json>

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

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

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

</div>

</div>

</li>

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

data-load=js/category-detail-7.json>

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

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

</div>

</div>

</li>

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

data-load=js/category-detail-8.json>

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

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

</div>

</div>

</li>

<a href="###" target="_blank" class="dropdown-link">母婴</a

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

</div>

</div>

</li>

<a href="###" target="_blank" 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>

</div>

</div>

</li>

</div>

</div>

</li>

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

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

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

</div>

</div>

</li>

<a href="###" target="_blank" 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>

</div>

</div>

</li>

<a href="###" target="_blank" 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>

</div>

</div>

</li>

</ul>

</div>

</div>

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

</script>

</body>

</html>

/*公共样式*/

.container{

width: 1200px;

margin: 0 auto;

}

a.link{

color: #4d555d;

}

a.link:hover{

color: #f01414 !important;

}

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

}

.text-ellipsis{

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}

.text-hidden{

text-indent: -999999px;

overflow: hidden;

}

@font-face {font-family: "iconfont";

src: url('iconfont.eot?t=1577068294179'); /* IE9 */

src: url('iconfont.eot?t=1577068294179#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),

url('iconfont.woff?t=1577068294179') format('woff'),

url('iconfont.ttf?t=1577068294179') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */

url('iconfont.svg?t=1577068294179#iconfont') format('svg'); /* iOS 4.1- */

}

.icon {

font-family: "iconfont" !important;

font-size: 16px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.icon-weibiaoti1:before {

content: "\e60b";

}

.icon-caipiao:before {

content: "\e611";

}

.icon-win:before {

content: "\e631";

}

.icon-qq:before {

content: "\e66a";

}

.icon-fangdajing:before {

content: "\e617";

}

.icon-ai-app:before {

content: "\e622";

}

.icon-shouye:before {

content: "\e606";

}

.icon-shouji:before {

content: "\e615";

}

.icon-xiala:before {

content: "\e616";

}

.icon-weixin:before {

content: "\e7b4";

}

.icon-huochepiaomianxing:before {

content: "\e8d8";

}

.icon-xiaoxi:before {

content: "\e67e";

}

.icon-licai:before {

content: "\e6aa";

}

.icon-youxi:before {

content: "\e6c6";

}

.icon-jiugongge:before {

content: "\e608";

}

.icon-CombinedShapex:before {

content: "\e602";

}

.icon-gouwuche:before {

content: "\e6f2";

}

.icon-Z:before {

content: "\e6b2";

}

.icon-guanbi:before {

content: "\e609";

}

.icon-action-clapper:before {

content: "\e60a";

}

.icon-hebingxingzhuang:before {

content: "\e61c";

}

.icon-shuaxin:before {

content: "\e6cd";

}

.icon-shoucang:before {

content: "\e6ab";

}

.icon-changyongtubiao-xianxingdaochu-zhuanqu-:before {

content: "\e74c";

}

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

vertical-align: middle;

}

.dropdown-layer{

z-index: 1;

display: none;

position: absolute;

}

.dropdown-left{

left: 0;

right: auto;

}

.dropdown-right{

right: 0;

left:auto;

}

.dropdown-loading{

width: 32px;

height: 32px;

background: url(../img/loading.gif)no-repeat;

margin: 20px;

}

.menu-active .dropdown-arrow{

-o-transform:rotate(180deg);

-ms-transform:rotate(180deg);

-moz-transform:rotate(180deg);

-webkit-transform:rotate(180deg);

transform:rotate(180deg);

}

/*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{

margin-left: 5px;

}

.menu .dropdown-layer{

top: 43px;

background: #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: #f3f5f7;

}

.menu-active .dropdown-toggle{

background-color:#fff;

border-color: #cdd0d4;

}

/*search*/

.search{

position: relative;

border:1px solid #cfd2d5;

}

.search-inputbox{

width: 605px;

height: 40px;

line-height: 40px;

padding: 0 10px;

border:none;

background-color: #fff;

}

.search-btn{

width: 73px;

height: 40px;

line-height: 40px;

background-color:#07111b;

border:none;

font-size: 14px;

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;

cursor: pointer;

padding: 0 10px;

}

.search-layer-item:hover{

background-color: #f3f5f7;

}

/*cart*/

.cart-name:after,.cart-logo,.cart-name,.cart-num,.cart-arrow{

color: #fff;

}

.cart{

margin-left:49px;

position: relative;

}

.cart-btn{

height: 14px;

width: 140px;

background-color: #f01414;

padding: 13px 0 15px 0;

cursor: pointer;

position: relative;

text-align: center;

}

.cart-name:after{

content: '|'!important;

margin: 0 10px;

font-size: 13px;

}

.cart-layer{

position: absolute;

top: 42px;

right: 0;

width:320px;

overflow-x:auto;

background: #fff;

}

.car-layer-item{

height: 20px;

width:80px;

background: #fff;

}

.cart-btn:hover{

background: #fff;

}

.cart:hover .cart-btn{

background: #fff;

}

.cart-active .cart-logo,

.cart-active .cart-name:after,

.cart-active .cart-name,

.cart-active .cart-num,

.cart-active .cart-arrow{

color: #f01414 ;

}

.cart-layer-title{

color:#07111b;

font-size: 12px;

height: 52px;

line-height: 52px;

padding-left: 24px;

}

.cart-layer-item,

.cart .item-total{

height: 64px;

width: 280px;

margin: 0 12px;

border-top: 1px solid #d9dde1;

}

.cart-layer-item img{

margin-top: 12px;

}

.cart .item-detail{

margin-left: 13px;

padding-top: 16px;

}

.cart .item-detail span{

display: block;

}

.cart-layer-item .item-close{

font-size: 20px;

}

.cart .dropdown-loading{

margin:30px 50px 40px 140px;

}

.cart .item-total{

line-height: 64px;

}

.cart .item-total .total-price{

margin-left: 15px;

}

.cart .item-total .gocartbtn{

height: 35px;

width: 80px;

background: #f01414;

line-height: 35px;

color: #fff;

text-align: center;

cursor: pointer;

margin-top: 15px;

border-radius: 3px;

}

/*category*/

.category{

width: 208px;

margin-top: -62px;

font-size: 14px;

position: relative;

}

.category .dropdown{

position: static;

}

.category-title{

display: block;

height: 54px;

line-height: 54px;

padding: 0 20px;

background: #c81414;

color: #fff;

}

.category-title .icon{

margin-right: 10px;

font-size: 16px;

}

.category-list{

height: 512px;

background: #f01414;

}

.category .dropdown-toggle{

height: 36px;

line-height: 36px;

padding-left: 16px;

color: #fff;

}

.category .dropdown-link{

color: #fff;

}

.category .dropdown-arrow{

position: absolute;

top: 12px;

right: 12px;

font-family: simsun;

font-weight: bold;

}

.category-active .dropdown-toggle{

background: #fff;

}

.category-active .dropdown-toggle,

.category-active .dropdown-link{

color: #f01414;

}

.category .dropdown-layer{

top: 54px;

left: 100%;

width: 744px;

min-height: 473px;

padding:8px 0 31px 0;

background:#fff;

box-shadow:0 0 5px rgba(0,0,0,0.2);

}

.category-details{

width: 744px;

margin-top: 24px;

line-height: 20px;

}

.category-details-title{

width: 84px;

padding-right: 16px;

border-right: 1px solid #d9dde1;

text-align: right;

}

.category-details-title-link{

color: #07111b;

font-weight: bold;

}

.category-details-item{

width: 592px;

padding-left: 15px;

}

.category-details-item .link{

display: inline-block;

margin-right: 16px;

}

.category .dropdown-loading{

margin: 220px auto 0;

}

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

}

/*常用公共样式*/

.fl {

float: left;

display: inline;

}

.fr {

float: right;

display: inline;

}

.cf:before,

.cf:after {

content: " ";

display: table;

}

.cf:after {

clear: both;

}

.cf {

*zoom: 1;

}

@font-face {font-family: "iconfont2";

src: url('iconfont.eot?t=1576720550924'); /* IE9 */

src: url('iconfont.eot?t=1576720550924#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAM4AAsAAAAABzAAAALpAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqCOIIWATYCJAMICwYABCAFhG0HMhs+BsgekiSBmAeK0l1RCQCwREDNkXvJPQGon9dURJAApCpcHaCrcJ1qNiLz2tVnzmxz6tblwR5kdp192cypEtWCX+pUqScacGGmts9zOb4lfo0PlOPamyb1AowDCmhvjAIJuEAKOBBsGLvAJVwnoFArGWZaanYxcBFZ8wLCPr2WBS45o9hSGeQLcmu2RuG2HPnJleQ5boXvD/+NBBcSOSmrZtGOFAHE//ph56Qy1vlml+ezg+0ixTAgEpbVOhewj5PD7BVqSQedwL4qA79+ZJkv3O0fj0DIZZUXg2YovCeRK77VbyYgIg9bAKdH1ZDXxQR4uNonH+y/GrS9H1TLBLn1P2ybcXevmQrcAusf+EOGyooGHrROurXU1P7K+ZlgXOXV/3TB3XdgLqB8slr38HXnxpuZD151rL5csfmu9Wrgpu2arXge5/m5O1uPXZB1tNuDnYUXVZduFjgutQS1tYRK9sPEF6Hge9Vz12lOe2Quz7yQsSov4ovn33q6F31qrMrNuXOd+CQmMoyr9gmT6usPT8bsXPyhPCHR1xeZfCBSaqp3x/XF9oEJANnF9GPqx3/Gz/5vrzeWRf/OL4If8P8b5M8uRtDPTf7tuQK/WdSzI+oSy5REVVSbTWzhfPt1hQqRwd5K78Zqa94pG+SreTN3npYUqXzdRGSGkaPIKHLlG0ehIWm7i1Qh7IVYgEFdAEG5EyRKfUSq3AsiMm+Ro9Zn5CoP9ii0IvgfWaQ36N2SCGIpEiDXDPU8toiOhbpFlYVIK5lYkpWEbCkiNn0EqhWqYiYNWRCZY4WtQauhVIQiwWaYCm5DJhOGVoINiKcKHaXWSKVSrHuQgsdm4GYqAmFRiADiNIP0eJiF6Pem3EqvL4RoSUxYpKWtJlgKIWz0g0NqCqoeRJrS0qvtXu6xaaClQVEiSERgZlAqsCMmO4lB1vpJBgiPUtCNiFtFUqJuYl+lYn21+ev2QSFLlwR7fCp/J5YaJV6HAAAAAAA=') format('woff2'),

url('iconfont.woff?t=1576720550924') format('woff'),

url('iconfont.ttf?t=1576720550924') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */

url('iconfont.svg?t=1576720550924#iconfont') format('svg'); /* iOS 4.1- */

}

.iconfont {

font-family: "iconfont2" !important;

font-size: 16px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.icon-gouwuche:before {

content: "\e6f2";

}

/*nav-site*/

.nav-site{

width: 100%;

background: #f3f5f7;

}

.nav-site .container{

height: 44px;

line-height: 44px;

border:1px solid #cdd0d4;

}

.nav-site-login{

color: #f01414;

margin-left: 15px;

}

.nav-site-mobile,

.nav-site-signup{

margin-left: 10px;

}

.nav-site-category{

margin: 0 10px;

}

.nav-site-service{

margin-right: 15px;

}

/*header*/

.header{

width: 100%;

height: 124px;

background: #f3f5f7;

}

.header .cart,

.header .search,

.header-logo{

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;

}

/*nav-main*/

.nav-main{

width: 100%;

height: 48px;

background: #07111b;

margin-bottom:8px;

text-indent: 182px;

}

.nav-main .link{

color: #fff;

font-size: 14px;

line-height: 48px;

margin-left: 50px;

}

/*focus*/

.focus{

width: 100%;

height: 504px;

background: #eee;

margin-bottom: 8px;

}

(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

}

})()

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

//$elem.addClass('fadeOut');

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

}

sildeLeftRight: {

init: function($elem) {

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

show: function($elem) {

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

hide: function($elem) {

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

}

fadeSildeUpDown: {

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

}

fadeSildeLeftRight: {

init: function($elem) {

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

})

}

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

});

}

fadeSildeUpDown: {

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

});

}

fadeSildeLeftRight: {

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)

};

}

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

(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: 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,function(){

self.$layer.height('auto')

.height(self.$layer.height())

});

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

}

};

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

var dropdown =$this.data('dropdown');

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

if (!dropdown) {

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

}

var dropdown = new Dropdown($this, options);

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

dropdown[option]();

}

})

}

})

})(jQuery);

(function($) {

'use strict';

var cache={

data:{},

count:0,

addData:function(key,data){

if (!this.data[key]) {

this.data[key]=data;

this.count++;

}

readData:function(key){

return this.data[key];

deleteDataByKey:function(key){

delete this.data[key];

this.count--;

deleteDataByOrder:function(num){

var count=0;

for(var p in this.data){

if(count>=num){

break;

}

count++;

this.deleteDataByKey(p);

}

function Search($elem, options) {

this.$elem = $elem;

this.options = options;

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

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

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

this.loaded = false;

this.$elem.on('click', 'search-btn', $.proxy(this.submit, this));

if (this.options.autocomplete) {

this.autocomplete();

}

Search.DEFAULTS = {

autocomplete: false,

url: 'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1576487058494_967&callback=jsonp968&k=1&area=c2c&bucketid=9&q=',

css3: false,

js: false,

animation: 'fade',

getDataInterval: 200

}

Search.prototype.submit = function() {

if (this.getInputVal() === '') {

return false;

}

this.$form.submit();

};

Search.prototype.autocomplete = function() {

var timer = null,

self = this;

this.$input

.on('input', function() {

if (self.options.getDataInterval) {

clearTimeout(timer);

timer = setTimeout(function() {

self.getData();

}, self.options.getDataInterval);

}else{

self.getData();

}

})

.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 (cache.readData(inputVal)) return self.$elem.trigger('search-getData', [cache.readData(inputVal)]);

if (this.jqXHR) this.jqXHR.abort();

this.jqXHR = $.ajax({

url: this.options.url + inputVal,

dataType: 'jsonp'

}).done(function(data) {

console.log(data);

cache.addData(inputVal,data);

console.log(cache.data);

console.log(cache.count);

self.$elem.trigger('search-getData', [data]);

}).fail(function() {

self.$elem.trigger('search-noData');

}).always(function() {

self.jqXHR = null;

})

};

Search.prototype.showLayer = function() {

if (!this.loaded) return;

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

};

Search.prototype.hideLayer = function() {

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

};

Search.prototype.getInputVal = function() {

return $.trim(this.$input.val());

};

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

var search = $this.data('search');

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

(function($) {

'use strict';

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

loadOnce($(this), buildMenuItem);

})

.dropdown({

css3: true,

js: false,

});

function buildMenuItem($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);

}

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

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({

autocomplete: true,

css3: false,

js: false,

animation: 'fade',

getDataInterval: 200

});

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;

}

/*cart*/

$('.cart').dropdown({

css3: true,

js: false,

delay: 0,

animation: 'slideUpDown',

active: 'cart'

});

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

var html = '',

$this = $(this),

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

Dataload = $this.data('load'),

maxNum = 5;

if (!Dataload) return;

$.getJSON(Dataload, function(data) {

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

createCartLayer(data);

$this.data('loaded', true)

} else {

createCartLayer(data);

}

function createCartLayer(data) {

var layer = [];

for (var i = 0; i < maxNum; i++) {

html += '<li class="dropdown-layer-item cart-layer-item">' + '<img src="' + data[i].url + '"alt="#" class="fl">' +

'<div class="item-detail fl">' + '<span class="item-detail-up">' + data[i].name + '</span><br>' +

'<span class="item-detail-down"><b>' + data[i].price + '</b></span>' + '</div>' + '<span class="fr"><a class="item-close"href="#">X</a></span>' + '</li>'

}

setTimeout(function() {

$layer.html('<li class="dropdown-layer-title cart-layer-title">新加入的商品</li>' + html + '<li class="item-total">' + '<span class="total-price fl">共<b>0</b>件商品共计<b>￥ 0.00</b></span>' +

'<div class="gocartbth fr">去购物车</div>' + '</li>'

);

updataLayer();

}, 1000)

}

})

//category

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

css3:true,

js:false,

animation:'fadeSlideLeftRight'

})