我目前正试图解决这个问题: http://www.jqueryscript.net/layout/Creating-A-Toggable-Bottom-Content-Panel-Using-jQuery-CSS.html
加载为隐藏并准备打开而不是已经打开。下面是main.js代码:
(function($) {
jQuery(document).ready(function() {
Panel.init();
$(document).on('click', '.tab-controller', function() {
Panel.togglePanel();
});
});
var Panel = {
isVisible : false,
showMessage : null,
hideMessage : null,
animationDuration : 350,
animationEasing : 'linear',
init : function() {
},
showPanel : function() {
$('.panel-wrapper').animate({
bottom : 0
}, Panel.animationDuration, Panel.animationEasing, function() {
Panel.isVisible = true;
Panel.updateTabMessage();
});
},
hidePanel : function() {
$('.panel-wrapper').animate({
bottom : -(Panel.getAnimationOffset())
}, Panel.animationDuration, Panel.animationEasing, function() {
Panel.isVisible = false;
Panel.updateTabMessage();
});
},
togglePanel : function() {
((this.isVisible) ? this.hidePanel : this.showPanel)();
},
updateTabMessage : function() {
if (this.isVisible) {
$('.tab-controller .close').show();
$('.tab-controller .show').hide();
} else {
$('.tab-controller .close').hide();
$('.tab-controller .show').show();
}
},
getAnimationOffset : function() {
return $('.panel-content').height();
}
}
})(jQuery);
我已经盯着这几个小时并且已经脑力衰退,我想我可能会遗漏一些基本的东西。这与CSS有什么关系吗?非常感谢任何帮助,谢谢!
答案 0 :(得分:1)
试试这个:
init : function() {
this.hidePanel();
},
而不是将init留空。
答案 1 :(得分:0)
我进行了以下修改,以便isVisible
标志确定面板是开始打开还是关闭:
修改hidePanel()
函数,以便我们可以传递一个标志。该标志确定面板是否应该设置动画或者" snap"关闭。这使我们可以在初始化时立即关闭菜单而无需任何动画。
hidePanel: function (snap) {
$('.panel-wrapper').animate({
bottom: -(Panel.getAnimationOffset())
}, (snap ? 0 : Panel.animationDuration), Panel.animationEasing, function () {
Panel.isVisible = false;
Panel.updateTabMessage();
});
},
修改init()
功能以检查isVisible
标志和" snap"如果合适,小组关闭:
init: function () {
if (!this.isVisible) {
this.hidePanel(true);
}
},
修改togglePanel()
功能以传递" snap"标记为hidePanel()
为false(做动画):
togglePanel: function () {
((this.isVisible) ? this.hidePanel(false) : this.showPanel)();
},
将初始isVisible
值设置为false
:
isVisible: false,
要开始打开面板,只需将isVisible
标记设为true
:
isVisible: true,