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留空。

Answer 2

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

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

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

修改init()功能以检查isVisible标志和＆＃34; snap＆＃34;如果合适，小组关闭：
```
init: function () {
    if (!this.isVisible) {
        this.hidePanel(true);
    }
},
```
修改togglePanel()功能以传递＆＃34; snap＆＃34;标记为hidePanel()为false（做动画）：
```
togglePanel: function () {
    ((this.isVisible) ? this.hidePanel(false) : this.showPanel)();
},
```
将初始isVisible值设置为false：
```
isVisible: false,
```
要开始打开面板，只需将isVisible标记设为true：
```
isVisible: true,
```

EXAMPLE STARTING CLOSED

EXAMPLE STARTING OPEN

＆＃34; JQuery Bottom Content Panel＆＃34;加载为＆＃34;隐藏＆＃34;而不是＆＃34;显示＆＃34;

2 个答案: