本地文件这里改写了一下，显示不出来
$(".dropdown").on('dropdown-show',function(e){
//jQuery封装的获取json的方法 chrome不支持
// $.getJSON('dropdown.json',function(data){
// console.log(data)
// })
var data=[
{
"url":"###",
"name":"已买到的宝贝"
},
{
"url":"###",
"name":"我的足迹"
},
{
"url":"###",
"name":"我的优惠券"
}
]
var $layer=$(this).find('.dropdown-layer'),
html='';
for(const item of data){
html+='<li><a href="'+item.url+'" target="_blank" class="menu-item">'+item.name+'</a></li>'
}
$layer.html(html)
})
这里拼接的html直接放到ul下面是可以显示的，但是执行$layer.html(html)不显示
正在回答
同学你好， 老师只是提供了一个方式， 代码可以完整一下哦， 老师这里以源码测试为例：
因为按需加载是用户的行为，所以我们可以提供一个方法，它的作用是更新当前下拉层的宽和高，当用户按需加载完成内容后，手动调用这个方法更新下拉层的宽和高。
在dropdown.js中init方法中添加一个函数用来更新下拉层的宽高， 第一遍将下拉层高度设置为auto， 让其由填充的内容撑开，然后在获取到填充内容后的高度， 赋值给下拉层，让其在页面中显示正常。
调用这个函数， 在请求到json数据后，将拼接的html结构添加到页面后调用这个函数更新下拉层的宽高。
将animation改成 slideUpDown测试效果
效果图， 也是可以正常显示的
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~~
$(".dropdown").dropdown({
event:'hover',
css3: true,
js: true,
animation: 'fade',
active:'menu',
delay:0
}); //调用插件
$('#btn-show').on('click',function(){
$(".dropdown").dropdown('show')
})
$('#btn-hide').on('click',function(){
$(".dropdown").dropdown('hide')
})
不知道哪里有问题，animation: 'fade',是可以显示的，但是fade改成slideUpDown，$layer的高度就会变成0,所以添加的li都不会显示，.dropdown-layer下样式有写overflow:hidden
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星