" JQuery Bottom Content Panel"加载为"隐藏"而不是"显示"

时间:2014-10-08 17:52:58

标签: javascript jquery

我目前正试图解决这个问题: 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有什么关系吗?非常感谢任何帮助,谢谢!

2 个答案:

答案 0 :(得分:1)

试试这个:

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

而不是将init留空。

答案 1 :(得分:0)

我进行了以下修改,以便isVisible标志确定面板是开始打开还是关闭:

  1. 修改hidePanel()函数,以便我们可以传递一个标志。该标志确定面板是否应该设置动画或者" snap"关闭。这使我们可以在初始化时立即关闭菜单而无需任何动画。

    hidePanel: function (snap) {
        $('.panel-wrapper').animate({
            bottom: -(Panel.getAnimationOffset())
        }, (snap ? 0 : Panel.animationDuration), Panel.animationEasing, function () {
            Panel.isVisible = false;
            Panel.updateTabMessage();
        });
    },
    
  2. 修改init()功能以检查isVisible标志和" snap"如果合适,小组关闭:

    init: function () {
        if (!this.isVisible) {
            this.hidePanel(true);
        }
    },
    
  3. 修改togglePanel()功能以传递" snap"标记为hidePanel()为false(做动画):

    togglePanel: function () {
        ((this.isVisible) ? this.hidePanel(false) : this.showPanel)();
    },
    
  4. 将初始isVisible值设置为false

    isVisible: false,
    
  5. 要开始打开面板,只需将isVisible标记设为true

    isVisible: true,
    

  6. EXAMPLE STARTING CLOSED

    EXAMPLE STARTING OPEN