“ JQuery底部内容面板”加载为“隐藏”而不是“显示”

Question

I'm currently trying to get this: http://www.jqueryscript.net/layout/Creating-A-Toggable-Bottom-Content-Panel-Using-jQuery-CSS.html

To load as hidden and ready to be opened instead of already opened. Below is the main.js code:

(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);

I've been staring at this for hours and have gone braindead, I think I might be missing something basic. Would this have anything to do with the CSS? Any help would be greatly appreciated, thanks!

Answer 1

Try this:

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

Instead of leaving the init empty.

Answer 2

I made the following modifications so that the isVisible flag determines whether the panel starts OPEN or CLOSED:

1. Modify the hidePanel() function so that we can pass it a flag. The flag determines whether the panel should animate or "snap" shut. This gives us the option to close the menu instantly upon init without any animation.

    hidePanel: function (snap) { $('.panel-wrapper').animate({ bottom: -(Panel.getAnimationOffset()) }, (snap ? 0 : Panel.animationDuration), Panel.animationEasing, function () { Panel.isVisible = false; Panel.updateTabMessage(); }); }, 

2. Modify the init() function to check the isVisible flag and "snap" the panel shut if appropriate:

    init: function () { if (!this.isVisible) { this.hidePanel(true); } }, 

3. Modify the togglePanel() function to pass the "snap" flag to hidePanel() as false (do animation):

    togglePanel: function () { ((this.isVisible) ? this.hidePanel(false) : this.showPanel)(); }, 

4. Set the intial isVisible value to false :

    isVisible: false, 

5. To start with the panel open, just set the isVisible flag to true :

    isVisible: true, 

---

EXAMPLE STARTING CLOSED

EXAMPLE STARTING OPEN