javascript - "JQuery Bottom Content Panel"加载为 "hidden"而不是 "show"

Question

我目前正在尝试得到这个: 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 有什么关系吗？任何帮助将不胜感激，谢谢!

Answer 1

试试这个:

init : function() {
       this.hidePanel();
},

而不是让 init 为空。