为什么我的按需加载中列表没有显示完全，为什么按需加载第一次加载时图片有动画而列表没有动画？
dropdown.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
/*公共样式*/
body{
background-color: lightgrey;
}
.dropdown{
position: relative;
}
.dropdown-toggle{
position: relative;
z-index: 2;
}
.dropdown-arrow{
display: inline-block;
background-repeat: no-repeat;
vertical-align: middle;
}
.dropdown-layer{
overflow: hidden;
display: none;
z-index: 1;
position: absolute;
}
.dropdown-left{
left: 0;
right: auto;
}
.dropdown-right{
right: 0;
left: auto;
}
/*dropdown*/
.menu .dropdown-toggle{
height: 100%;
display: block;
padding: 0 26px 0 12px;
border-left: 1px solid #F3F5F7;
border-right: 1px solid #F3F5F7;
}
.menu .dropdown-arrow{
background-image: url();
}
.menu .dropdown-layer{
top: 100%;
background-color: #fff;
border: 1px solid #cdd0d4;
margin-top: -1px;
}
.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;
}
.ml50{
margin-left: 200px;
}
.fadeOut{
visibility: hidden;
opacity: 0;
}
.slidUpDownCollapse{
height: 0!important;
padding-top: 0!important;
padding-bottom: 0!important;
}
.slidLeftRightCollapse{
width: 0!important;
padding-left: 0!important;
padding-right: 0!important;
}
.transition{
transition: all 0.5s;
}
.btn{
margin-left: 50px;
}
.dropdown-loading{
width: 32px;
height: 32px;
background: url(img/QQ浏览器截图20181106215903.png) no-repeat;
margin: 20px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
</head>
<body>
<button id="btn_show" class="btn">点我显示</button>
<button id="btn_hide" class="btn">点我隐藏</button>
<div class="menu dropdown fl ml50" data-active = "menu" data-load='test/dropdown.json'>
<a class="dropdown-toggle">
我的慕淘<i class="dropdown-arrow"></i>
</a>
<ul class="dropdown-left dropdown-layer transition">
<li class="dropdown-loading"></li>
</ul>
<!--<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>-->
</div>
<div class="menu dropdown fl ml50" data-active = "menu">
<a class="dropdown-toggle">
我的慕淘<i class="dropdown-arrow"></i>
</a>
<ul class="dropdown-left dropdown-layer transition">
<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>
</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/showHide.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>
<script type="text/javascript">
$('.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');
// $layer.css('height','auto');
var html='';
$.getJSON($this.data('load'),function(data){
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);
})
}
});
$('.dropdown')._dropdown({
css3:true,
animation:'slideUpDown',
event:'hover',
});
$('#btn_show').on('click',function(){
$('.dropdown')._dropdown('show');
});
$('#btn_hide').on('click',function(){
$('.dropdown')._dropdown('hide');
});
</script>
</body>
</html>base.css:
/*css reset*/
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
.fl{
float: left;
}
.fr{
float: right;
}transition.js:
(function(){
var transitionEndEventName={
transition:'transitionend',
MozTransition:'transitionend',
WebkitTransition:'webkitTransitionEnd',
OTransition:'oTransitionEnd otransitionend',
}
var transitionEnd='';
var isSupport=false;
for(var name in transitionEndEventName){
if(document.body.style[name]!==undefined){
transitionEnd=transitionEndEventName[name];
isSupport=true;
break;
}
}
window.mt=window.mt||{};
window.mt.transition={
end:transitionEnd,
isSupport:isSupport
}
})();showHide.js:
(function($){
var transition=window.mt.transition;
function init($elem,hiddenCallback){
if($elem.is(':hidden')){
$elem.data('status','hidden');
if(typeof hiddenCallback==="function") hiddenCallback();
}else{
$elem.data('status','shown');
}
}
function show($elem,callback){
if($elem.data('status')==='show'||$elem.data('status')==='shown') return;
$elem.data('status','show').trigger('show');
callback();
}
function hide($elem,callback){
if($elem.data('status')==='hide'||$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,'slidUpDownCollapse');
},
show:function($elem){
css3._show($elem,'slidUpDownCollapse');
},
hide:function($elem){
css3._hide($elem,'slidUpDownCollapse');
}
},
slideLeftRight:{
init:function($elem){
$elem.width($elem.width());
css3._init($elem,'slidLeftRightCollapse');
},
show:function($elem){
css3._show($elem,'slidLeftRightCollapse');
},
hide:function($elem){
css3._hide($elem,'slidLeftRightCollapse');
}
},
fadeSlideUpDown:{
init:function($elem){
$elem.height($elem.height());
css3._init($elem,'fadeOut slidUpDownCollapse');
},
show:function($elem){
css3._show($elem,'fadeOut slidUpDownCollapse');
},
hide:function($elem){
css3._hide($elem,'fadeOut slidUpDownCollapse');
}
},
fadeSlideLeftRight:{
init:function($elem){
$elem.width($elem.width());
css3._init($elem,'fadeOut slidLeftRightCollapse');
},
show:function($elem){
css3._show($elem,'fadeOut slidLeftRightCollapse');
},
hide:function($elem){
css3._hide($elem,'fadeOut slidLeftRightCollapse');
}
},
}
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);
},10)
})
}
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._inite($elem);
},
show:function($elem){
js._show($elem,'fadeIn');
},
hide:function($elem){
js._hide($elem,'fadeOut');
}
},
slideUpDown:{
init:function($elem){
js._inite($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._inite=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._inite($elem,function(){
$elem.css(options);
})
}
js._customShow=function($elem){
show($elem,function(){
$elem.show();
$elem.stop().animate($elem.data('styles'),function(){
$elem.data('status','shown').trigger('shown');
})
})
}
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');
});
})
}
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',
active:'menu'
}
function showHide($elem,options){
var mode=null;
if(options.css3&&transition.isSupport){
mode=css3[options.animation]||css3[defaults.animation];
console.log('css3');
}else if(options.js){
mode=js[options.animation]||js[defaults.animation];
console.log('js');
}else{
mode=silent;
console.log('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);
var _mode=$this.data('showHide');
var options=$.extend({},defaults,typeof option==='object'&& option);
// console.log(options);
if(!_mode){
$this.data('showHide',_mode=showHide($this,options));
}
if(typeof _mode[option]==='function'){
_mode[option]();
}
});
}
})
// window.mt=window.mt||{};
// window.mt.showHide=showHide;
})(jQuery)dropdown.js:
(function($){
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={
css3:false,
js:false,
animation:'fade',
event:'hover',
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"){
setTimeout(function(){
})
this.$elem.click(function(e){
self.show();
e.stopPropagation();
});
$(document).click($.proxy(this.hide,this));
}else{
this.$elem.hover($.proxy(this.show,this),$.proxy(this.hide,this));
}
};
Dropdown.prototype.show=function(){
var self=this;
if(this.options.delay){
this.timer=setTimeout(function(){
_show();
},this.options.delay);
}else{
_show();
}
function _show(){
self.$elem.addClass(self.activeClass);
self.$layer.showHide('show');
}
}
Dropdown.prototype.hide=function(){
if(this.options.delay){
clearTimeout(this.timer);
}
this.$elem.removeClass(this.activeClass);
this.$layer.showHide('hide');
}
$.fn.extend({
_dropdown:function(option){
return this.each(function(){
var $this=$(this),
dropdown=$this.data('dropdown'),
options=$.extend({},Dropdown.DEFAULTS,$(this).data(),typeof option==='object'&& option);
// var dropdown=new Dropdown(this,options);
if(!dropdown){
$this.data('dropdown',dropdown=new Dropdown($this,options));
}
if(typeof dropdown[option]==='function'){
dropdown[option]();
}
})
}
})
})(jQuery);dropdown.jason:
[
{
"url":"###",
"name":"已买到的宝贝"
},
{
"url":"###",
"name":"我的足迹"
},
{
"url":"###",
"name":"我的优惠券"
}
]0
收起
正在回答 回答被采纳积分+1
2回答
组件化思想开发电商网页 18版
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星