按需加载并且使用css方式实现slideUpDown特效显示，这是会出现layer高度为0的问题

初始化时，记录了layer的高度，这时还没加载，所以高度为0 ，

虽然后来触发show事件时，在layer中加载了内容，但是slideUpDown显示特效就是高度从0变成0.

源自：实战：下拉菜单组件化 3-5 下拉菜单的按需加载

收起

2回答

好帮手慕夭夭 2019-11-19 09:58:17

同学你好，因为高度设置时数据还没有完全加载进来，当数据完全加载过来，高度不会更新了，所以出现问题了。同学找一下自己项目的dropdown.js ，设置一个更新高度的函数。如下：

（因为没有你的文件，所以老师使用的源码中的文件）

index.js

如果没有解决问题，可以继续提问，把自己项目的html ，css ，js代码都粘贴上来，以便老师准确高效的定位问题。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

好帮手慕夭夭 2019-11-18 15:14:26

同学你好，这个问题可能是数据还没有加载进来，就计算高度，所以为0。请同学把index.js代码粘贴上来，老师帮助你确认一下。（注意不要截图，把代码粘贴过来，以便老师测试准确高效的为你查找问题）

祝学习愉快！

提问者午炎子栩 #1

index.js (function($){ 'use strict'; // 按需加载 $('.dropdown').on('dropdown-show',function(e){ var $this = $(this); var dataload = $this.data('load'); if(!dataload) return; //有json数据地址才往下去执行加载 if(!$this.data('loaded')){//只一次加载---已经加载就不加载了 var $layer = $this.find('.dropdown-layer'), 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, js : false, animation: 'slideUpDown' }); })(jQuery); ------------------ animation: 'slideUpDown'

2019-11-18 23:22:04