本地文件这里改写了一下，显示不出来
来源：3-5 下拉菜单的按需加载
Leonard_
2019-09-03 20:03:02
$(".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)不显示
4回答
-
同学你好， 老师只是提供了一个方式， 代码可以完整一下哦， 老师这里以源码测试为例：
因为按需加载是用户的行为，所以我们可以提供一个方法，它的作用是更新当前下拉层的宽和高，当用户按需加载完成内容后，手动调用这个方法更新下拉层的宽和高。
在dropdown.js中init方法中添加一个函数用来更新下拉层的宽高， 第一遍将下拉层高度设置为auto， 让其由填充的内容撑开，然后在获取到填充内容后的高度， 赋值给下拉层，让其在页面中显示正常。
调用这个函数， 在请求到json数据后，将拼接的html结构添加到页面后调用这个函数更新下拉层的宽高。
将animation改成 slideUpDown测试效果
效果图， 也是可以正常显示的
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~~
0 -
好帮手慕慕子
2019-09-04
同学你好， 由于浏览器限制加载本地的json文件， 需要将项目放在wamp下的www目录下，启动wamp， 从服务器打开html文件才可以使用$.getJSON方法加json文件
对于同学说的其他情况， 建议：将你写的全部代码粘贴过来， 便于老师准确高效的为你解决问题
祝学习愉快~~~
0h019-09-04 -
Leonard_
提问者
2019-09-03
$(".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
0 -
Leonard_
提问者
2019-09-03
控制台elements下三个li也确实放进去了，页面上也占了位置，但是都是空白
0
相似问题