“JQuery的底部内容面板”加载为“隐藏”，而不是“作秀”

我正在试图让这个： http://www.jqueryscript.net/layout/Creating-A-Toggable-Bottom-Content-Panel-Using-jQuery-CSS.html “JQuery的底部内容面板”加载为“隐藏”，而不是“作秀”

要加载为隐藏和准备的已经打开，而不是被打开。下面是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有什么关系？任何帮助将不胜感激，谢谢！

来源

2014-10-08 Jamqes Barndonius

我作了如下的修改，使得isVisible标志确定面板是否开始开或关：

修改hidePanel()功能，使得我们可以通过它的标志。该标志确定面板是应该动画还是“快速”关闭。这使我们可以在没有任何动画的情况下立即关闭菜单。

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

修改init()功能检查isVisible标志和“捕捉”面板关闭，如果合适：

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

修改togglePanel()功能，通过“捕捉”标志hidePanel()为假（做动画）：

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

设置初始isVisible价值false：
```
isVisible: false, 
```
要开始与面板打开，只需设置isVisible标志true：
```
isVisible: true, 
```

EXAMPLE STARTING CLOSED

EXAMPLE STARTING OPEN

来源

2014-10-08 18:19:04 showdev

只需在代码中添加这些内容，就可以更整洁并显示干净。感谢您花时间帮助:) – 2014-10-09 19:13:58

试试这个：

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

而是留在init空的。

来源

2014-10-08 18:06:58 Phani

太棒了！谢谢，虽然它在页面打开时显示关闭动画，但我无法对此感到困扰。谢谢帕尼:) – 2014-10-08 18:18:39

我很高兴它为你工作！ – Phani 2014-10-08 20:41:44

“JQuery的底部内容面板”加载为“隐藏”，而不是“作秀”

回答

相关问题