我的按需加载的导航栏无法正常显示高度，哪有问题
//dropdowm
(function($) {
// 构造函数的方式
function Dropdown(elem, options) {
this.$elem = $(elem);
this.option = options;
this.className = options.active +'-active';
this.$layer = this.$elem.find('.dropdown-layer');
this._init();
}
Dropdown.DEFAULTS = {
css3: false,
active: 'dropdown',
js: false,
animation: 'fade',
event: 'hover',
delay:0
}
Dropdown.prototype._init = function() {
this.$layer.showHide(this.option);
var self = this;
this.$layer.on('show shown hide hidden', function(e) {
self.$elem.trigger('dropdown-' + e.type, function() {
self.$layer.height('auto')
.height(self.$layer.height())
});
})
if(this.option.event === 'click') {
this.$elem.on('click',function(e) {
self.show();
e.stopPropagation();
})
$(document).on('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.option.delay) {
this.timer = setTimeout(function() {
self.$elem.addClass(self.className);
self.$layer.showHide('show');
},this.option.delay)
}else {
this.$elem.addClass(this.className);
this.$layer.showHide('show');
}
};
Dropdown.prototype.hide = function() {
if(this.option.delay) {
clearTimeout(this.timer);
}
this.$elem.removeClass(this.className);
this.$layer.showHide('hide');
};
// function dropdown(elem, options) {
// var $elem = $(elem);
// var className = $elem.data('active')+'-active';
// var $layer = $elem.find('.dropdown-layer');
// $layer.showHide(options)
// $elem.hover( function() {
// $elem.addClass(className);
// $layer.showHide('show');
// },function() {
// $elem.removeClass(className);
// $layer.showHide('hide');
// });
// }
// var defaults = {
// css3: false,
// js: false,
// animation: 'fade'
// }
//以插件的形式将模块暴露出去
$.fn.extend({
dropdown:function(option){
return this.each(function(){
var dropdown = $(this).data('dropdown');
var options = $.extend({},this.DEFAULTS,$(this).data,typeof option === 'object'&& option);
if(!dropdown) {
$(this).data('dropdown', dropdown = new Dropdown(this,options));
}
if(typeof dropdown[option] === 'function') {
dropdown[option]();
}
});
}
});
})(jQuery)
//index
(function ($) {
$('.dropdown').dropdown({
css3:true,
js:true,
animation: 'slideUpDown',
active: 'menu',
event:'hover',
delay: 200
});
$('.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'),
html = '';
$.getJSON(dataLoad, function (data) {
// console.log(1);
// 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);
});
}
});
})(jQuery);
正在回答
同学你好，因为同学写的代码和源码并不一样，所以无法准确判断。不过这里可给同学一个思路：
在dropdown.js中init方法中添加一个函数用来更新下拉层的高， 第一遍将下拉层高度设置为auto， 让其由填充的内容撑开，然后在获取到填充内容后的高度， 赋值给下拉层，让其在页面中显示正常。
调用这个函数， 在请求到json数据后，将拼接的html结构添加到页面后调用这个函数更新下拉层的高。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星