老师帮我看看，json获取有问题
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<style type="text/css">
.testdiv{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl"><a href="javascript:;" class="dropdown-login">亲，请登录</a></li>
<li class="fl"><a href="javascript:;" class="dropdown-signup link">免费注册</a></li>
<li class="fl"><a href="javascript:;" class="dropdown-mobile link">手机逛慕淘</a></li>
</ul>
<ul class="fr">
<li class="menu dropdown fl" data-active="menu">
<a href="javascript:;" class="dropdown-toggle link">我的慕淘
<i class="dropdown-arrow"></i>
</a>
<ul class="dropdown-layer dropdown-left">
<li><a href="javascript:;" class="menu-item">已买到的宝贝</a></li>
<li><a href="javascript:;" class="menu-item">我的足迹</a></li>
</ul>
</li>
<li class="menu dropdown fl" data-active="menu">
<a href="javascript:;" class="dropdown-toggle link">收藏夹
<i class="dropdown-arrow"></i>
</a>
<ul class="dropdown-layer dropdown-left">
<li><a href="javascript:;" class="menu-item">收藏的宝贝</a></li>
<li><a href="javascript:;" class="menu-item">收藏的店铺</a></li>
</ul>
</li>
<li class="fl"><a href="javascript:;" class="nav-site-category link">商品分类</a></li>
<li class="menu dropdown fl" data-active="menu" data-load='js/dropdown.json'>
<a href="javascript:;" class="dropdown-toggle link">卖家中心
<i class="dropdown-arrow"></i>
</a>
<ul class="dropdown-layer dropdown-left">
<li><a href="javascript:;" class="menu-item">加载中</a></li>
<!-- <li><a href="javascript:;" class="menu-item">免费开店</a></li>
<li><a href="javascript:;" class="menu-item">已卖出的宝贝</a></li>
<li><a href="javascript:;" class="menu-item">出售中的宝贝</a></li>
<li><a href="javascript:;" class="menu-item">卖家服务中心</a></li>
<li><a href="javascript:;" class="menu-item">卖家服务中心</a></li> -->
</ul>
</li>
<li class="nav-site-service menu dropdown fl" data-active="menu">
<a href="javascript:;" class="dropdown-toggle link">联系客服
<i class="dropdown-arrow"></i>
</a>
<ul class="dropdown-layer dropdown-right">
<li><a href="javascript:;" class="menu-item">消费者客服</a></li>
<li><a href="javascript:;" class="menu-item">卖家客服</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="testdiv"></div>
<button class="btnshow">显示</button>
<button class="btnhide">隐藏</button>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>
<script type="text/javascript" src="js/showHide.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
.container{
width: 1200px;
margin: 0 auto;
}
.link{
color: #4d555d;
}
.link:hover{
color: #f01414;
}
.dropdown{
position: relative;
}
.dropdown-toggle{
position: relative;
z-index: 2;
}
.dropdown-arrow{
display: inline-block;
vertical-align: middle;
}
.dropdown-layer{
display: none;
z-index: 1;
position: absolute;
overflow: hidden;
}
.dropdown-left{
left: 0;
}
.dropdown-right{
right: 0;
}
.menu .dropdown-toggle{
height: 100%;
display: block;
padding: 0 16px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}
.menu .dropdown-arrow{
width: 8px;
height: 6px;
margin-left: 8px;
}
.menu .dropdown-layer{
top: 43px;
background-color: #fff;
border: 1px solid #cdd0d4;
}
.menu-item{
display: block;
padding: 0 12px;
height: 30px;
line-height: 30px;
white-space: nowrap;
color: #4d555d;
}
.menu-item:hover{
background-color: #f3f5f7;
}
.menu.dropdown:hover .dropdown-layer{
}
.menu.dropdown:hover .dropdown-toggle{
}
.menu-active .dropdown-layer{
display: block;
}
.menu-active .dropdown-toggle{
border-color: #cdd0d4;
background-color: #fff;
}
.fadeOut{
visibility: hidden;
opacity: 0;
}
.slideUpDown{
height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.nav-site{
width: 100%;
background-color: #f3f5f7;
}
.nav-site .container{
height: 44px;
line-height: 44px;
border-bottom: 1px solid #cdd0d4;
}
.dropdown-login{
color: #f01414;
}
.dropdown-signup{
margin-left: 10px;
}
.dropdown-mobile{
margin-left: 10px;
}
.nav-site-category,
.nav-site-service{
margin-right: 15px;
}
(function($){
function Dropdown(elem,options){
this.$elem=$(elem);
this.options=options
this.activeClass=this.$elem.data('active')+'-active';
this.layer=this.$elem.find('.dropdown-layer')
var self=this;
this.layer.showHide(options)
this.$elem.on('show shown hide hidden',function(e){
self.layer.trigger('dropdown-'+e.type,function(){
self.layer.height('auto')
self.layer.height(self.layer.height())
})
})
if(options.event==='click'){
this.$elem.on('click',function(){
self.show()
return false;
})
$(document).on('click',function(){self.hide()})
}else{
this.$elem.hover(function(){
self.show()
},function(){
self.hide()
})
}
}
Dropdown.DEFAULTS={
event:'hover',
css3:false,
js:false,
animation:'fade',
delay:1000
}
Dropdown.prototype.show=function(){
var self=this;
if(this.options.delay){
this.timer=setTimeout(function(){
self.$elem.addClass(self.activeClass);
self.layer.showHide('show')
},this.options.delay)
}else{
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 dropdown=$(this).data('dropdown')
var options=$.extend({},Dropdown.DEFAULTS,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)
[
{
"url":"###",
"name":"免费开店"
},
{
"url":"###",
"name":"已卖出的宝贝"
},
{
"url":"###",
"name":"出售中的宝贝"
},
{
"url":"###",
"name":"卖家服务市场"
},
{
"url":"###",
"name":"卖家培训中心"
}
]
$('.dropdown').dropdown({
css3:true,
js:true,
animation:'slideUpDown'
});
$('.dropdown').on('dropdown-show',function(e,updateLayer){
var dataload=$(this).data('load')
var layer=$(this).find('.dropdown-layer')
var html=''
$.getJSON(dataload,function(data){
for(var i=0;i<data.length;i++){
html+='<li><a href="javascript:;" class="menu-item">'+data[i].name+'<\/a><\/li>'
}
console.log(html)
layer.html(html)
updateLayer()
})
})
console.log(window.mt.transition.end)
var testdiv=$('.testdiv')
testdiv.showHide({
css3:true,
animation:'slideUpDown'
})
$('.btnshow').on('click',function(){
// testdiv.showHide('show')
$('.dropdown').dropdown('show')
})
$('.btnhide').on('click',function(){
// testdiv.showHide('hide')
$('.dropdown').dropdown('hide')
})
(function($){
var transitionend=window.mt.transition
var silent={
init:function($elem){
if($elem.is(':hidden')){
$elem.data('status','hidden')
}else{
$elem.data('status','shown')
}
},
show:function($elem){
if($elem.data('status')==='show') return
if($elem.data('status')==='shown') return
$elem.data('status','show').trigger('show')
$elem.show();
$elem.data('status','shown').trigger('shown')
},
hide:function($elem){
if($elem.data('status')==='hide') return
if($elem.data('status')==='hidden') return
$elem.data('status','hide').trigger('hide')
$elem.hide();
$elem.data('status','hidden').trigger('hidden')
}
}
var css3={
fade:{
init:function($elem){
$elem.addClass('transition')
if($elem.is(':hidden')){
$elem.data('status','hidden')
$elem.addClass('fadeOut')
}else{
$elem.data('status','shown')
}
},
show:function($elem){
if($elem.data('status')==='show')return
if($elem.data('status')==='shown')return
$elem.data('status','show').trigger('show')
$elem.show()
$elem.one('transitionend',function(){
$elem.data('status','shown').trigger('shown')
})
setTimeout(function(){
$elem.removeClass('fadeOut')
},20)
},
hide:function($elem){
if($elem.data('status')==='hide')return
if($elem.data('status')==='hidden')return
$elem.one('transitionend',function(){
$elem.hide()
$elem.data('status','hidden').trigger('hidden')
})
$elem.addClass('fadeOut')
}
},
slideUpDown:{
init:function($elem){
$elem.height($elem.height())
$elem.addClass('transition')
if($elem.is(":hidden")){
$elem.data('status','hidden')
$elem.addClass('slideUpDown')
}else{
$elem.data('status','shown')
}
},
show:function($elem){
if($elem.data('status')==='show') return
if($elem.data('status')==='shown') return
$elem.data('status','show').trigger('show')
$elem.show()
$elem.off(transitionend.end).one(transitionend.end,function(){
$elem.data('status','shown').trigger('shown')
})
setTimeout(function(){
$elem.removeClass('slideUpDown')
},20)
},
hide:function($elem){
if($elem.data('status')==='hide') return
if($elem.data('status')==='hidden') return
$elem.data('status','hide').trigger('hide')
$elem.off(transitionend.end).one(transitionend.end,function(){
$elem.data('status','hidden').trigger('hidden')
$elem.hide()
})
$elem.addClass('slideUpDown')
}
}
}
// var testdiv=$('.testdiv')
// css3.fade.init(testdiv)
// $('.btnshow').on('click',function(){
// css3.fade.show(testdiv)
// })
// $('.btnhide').on("click",function(){
// css3.fade.hide(testdiv)
// })
// testdiv.on('show shown hide hidden',function(e){
// console.log(e.type)
// })
var defaults={
css3:false,
js:false,
animation:'fade'
}
function showHide($elem,options){
options=$.extend({},defaults,options)
var mode=null;
if(options.css3&&transitionend){
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)
var mode=$this.data('showHide')
if(!mode){
$this.data('showHide',mode=showHide($this,typeof option==='object' && option))
}
if(typeof mode[option]==='function'){
mode[option]()
}
})
}
})
})(jQuery)
(function(){
var transitionEndEventName={
transition:'transitionend',
MozTransition:'transitionend',
WebkitTransition:'webkitTransitionEnd',
OTransition:'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
}
})()
正在回答
同学你好，这是因为数据加载的非常快，所以看不到加载中效果。例如把之前的定时器加上，让它过一会再添加到页面，就看到效果了。
祝学习愉快 ~
我那个updatelayer和现在你的total有什么区别吗？不都是实时更新一下高度吗？
视频最后是可以把定时器去掉然后是可以正常显示的，我这个把定时器去掉下拉的数据就没有显示
还是有问题，老师，帮我看看
我知道了。。
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧