隐藏面板-默认情况下,页面加载时处于打开状态

尼基尔

问题是页面加载时,默认情况下,页面底部的面板处于打开状态。我需要设置页面加载时面板应该关闭,并且功能将保持与当前相同,当我们单击面板打开并再次单击时,面板将关闭,反之亦然。

(function($) {

  jQuery(document).ready(function() {

    Panel.init();

    $(document).on('click', '.tab-controller', function() {
      Panel.togglePanel();
    });

  });

  var Panel = {

    isVisible: true,
    showMessage: null,
    hideMessage: null,
    animationDuration: 650,
    animationEasing: 'linear',

    init: function() {

    },

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

    showPanel: function() {
      $('.panel-wrapper').animate({
        bottom: 0
      }, Panel.animationDuration, Panel.animationEasing, function() {
        Panel.isVisible = true;
        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);
.panel-wrapper * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.panel-wrapper {
  position: fixed;
  left: 0;
  bottom: 0;
  overflow: hidden;
  width: 100%;
  font-family: sans-serif;
}
.panel-controller {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.tab-controller {
  float: right;
  margin-right: 50px;
  padding: 10px 10px 5px;
  background-color: #8C293B;
  -webkit-border-radius: 15px 15px 0 0;
  -moz-border-radius: 15px 15px 0 0;
  border-radius: 15px 15px 0 0;
}
.tab-controller * {
  display: block;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: white;
  cursor: pointer;
}
.tab-controller .show {
  display: none;
}
.panel-content {
  overflow: hidden;
  width: 100%;
  background-color: #8C293B;
}
.panel-content .content {
  overflow: hidden;
  margin: 0 auto;
  max-width: 900px;
  width: 98%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-wrapper">
  <div class="panel-controller">
    <div class="tab-controller">
      <span class="close">CLOSE PANEL</span>
      <span class="show">OPEN PANEL</span>
    </div>
    <!-- tab-controller -->
  </div>
  <!-- panel-controller -->
  <div class="panel-content">
    <div class="content clearfix">
      <div>This
        <br/>Space
        <br/>is
        <br/>inside
        <br/>panel.</div>
    </div>
    <!-- content -->
  </div>
  <!-- panel-content -->
</div>
<!-- panel-wrapper -->

回购

在您的CSS中,先隐藏“ .close”而不是“ .show”。

现在,在您的init函数中,设置面板包装的css bottom attr。

完毕。=)

现在,您的面板在加载时关闭,并且您的逻辑完好=)

(function($) {

  jQuery(document).ready(function() {

    Panel.init();

    $(document).on('click', '.tab-controller', function() {
      Panel.togglePanel();
    });

  });

  var Panel = {

    isVisible: false,
    showMessage: null,
    hideMessage: null,
    animationDuration: 650,
    animationEasing: 'linear',

    init: function() {
        $('.panel-wrapper').css("bottom", -(Panel.getAnimationOffset()));
    },

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

    showPanel: function() {
      $('.panel-wrapper').animate({
        bottom: 0
      }, Panel.animationDuration, Panel.animationEasing, function() {
        Panel.isVisible = true;
        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);
.panel-wrapper * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.panel-wrapper {
  position: fixed;
  left: 0;
  bottom: -100px;
  overflow: hidden;
  width: 100%;
  font-family: sans-serif;
}
.panel-controller {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.tab-controller {
  float: right;
  margin-right: 50px;
  padding: 10px 10px 5px;
  background-color: #8C293B;
  -webkit-border-radius: 15px 15px 0 0;
  -moz-border-radius: 15px 15px 0 0;
  border-radius: 15px 15px 0 0;
}
.tab-controller * {
  display: block;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: white;
  cursor: pointer;
}
.tab-controller .close {
  display: none;
}
.panel-content {
  overflow: hidden;
  width: 100%;
  background-color: #8C293B;
}
.panel-content .content {
  overflow: hidden;
  margin: 0 auto;
  max-width: 900px;
  width: 98%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-wrapper">
  <div class="panel-controller">
    <div class="tab-controller">
      <span class="close">CLOSE PANEL</span>
      <span class="show">OPEN PANEL</span>
    </div>
    <!-- tab-controller -->
  </div>
  <!-- panel-controller -->
  <div class="panel-content">
    <div class="content clearfix">
      <div>This
        <br/>Space
        <br/>is
        <br/>inside
        <br/>panel.</div>
    </div>
    <!-- content -->
  </div>
  <!-- panel-content -->
</div>
<!-- panel-wrapper -->

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类常见问题

每次打开Chrome DevTools时,默认情况下如何使“控制台抽屉”保持隐藏状态?

来自分类Dev

在导航抽屉处于打开状态时隐藏隐藏的动作栏

来自分类Dev

面板可折叠的重新加载页面,而不是隐藏面板| angularjs | 引导程序| ng-repeat

来自分类Dev

选中复选框时显示/隐藏面板

来自分类Dev

为什么在jqm中打开面板时按钮隐藏

来自分类Dev

为什么在滑动面板打开时隐藏标题文本?

来自分类Dev

当elem隐藏时,Android webview':active'保持打开状态

来自分类Dev

在Wordpress管理面板中隐藏默认内容文本区域

来自分类Dev

默认情况下如何隐藏列?

来自分类Dev

在面板外部单击时如何隐藏Umano SlidingupPanel

来自分类Dev

CSS3面板默认保持打开状态

来自分类Dev

自动完成激活时,css隐藏左面板

来自分类Dev

默认情况下隐藏纸页眉面板

来自分类Dev

默认情况下如何使UISearchController()隐藏?

来自分类Dev

默认情况下,如何使所有可折叠项处于打开状态?

来自分类Dev

默认情况下如何隐藏div?

来自分类Dev

当自动完成隐藏在滚动区域中时,Angular Material自动完成面板不会隐藏

来自分类Dev

默认情况下,第一个切换处于打开状态

来自分类Dev

GNOME 3-底部面板处于隐藏状态-如何取消隐藏或更改行为

来自分类Dev

引导程序模板-保持可折叠面板处于打开状态

来自分类Dev

当其他下拉菜单处于活动/打开状态时,将自动隐藏/关闭下拉菜单

来自分类Dev

默认情况下如何在Nautilus中隐藏侧面板?

来自分类Dev

在页面加载中,底部面板应隐藏

来自分类Dev

JsTree-面板隐藏时选择节点

来自分类Dev

一个引导程序处于活动状态时如何隐藏面板?

来自分类Dev

如何从您的公共 IP 隐藏您的 linksys 网页面板

来自分类Dev

除非隐藏,否则在执行 php 时启用面板

来自分类Dev

SSRS 如何在设计模式下隐藏参数/分组面板

来自分类Dev

提交表单时如何隐藏选项面板?

Related 相关文章

  1. 1

    每次打开Chrome DevTools时,默认情况下如何使“控制台抽屉”保持隐藏状态?

  2. 2

    在导航抽屉处于打开状态时隐藏隐藏的动作栏

  3. 3

    面板可折叠的重新加载页面,而不是隐藏面板| angularjs | 引导程序| ng-repeat

  4. 4

    选中复选框时显示/隐藏面板

  5. 5

    为什么在jqm中打开面板时按钮隐藏

  6. 6

    为什么在滑动面板打开时隐藏标题文本?

  7. 7

    当elem隐藏时,Android webview':active'保持打开状态

  8. 8

    在Wordpress管理面板中隐藏默认内容文本区域

  9. 9

    默认情况下如何隐藏列?

  10. 10

    在面板外部单击时如何隐藏Umano SlidingupPanel

  11. 11

    CSS3面板默认保持打开状态

  12. 12

    自动完成激活时,css隐藏左面板

  13. 13

    默认情况下隐藏纸页眉面板

  14. 14

    默认情况下如何使UISearchController()隐藏?

  15. 15

    默认情况下,如何使所有可折叠项处于打开状态?

  16. 16

    默认情况下如何隐藏div?

  17. 17

    当自动完成隐藏在滚动区域中时,Angular Material自动完成面板不会隐藏

  18. 18

    默认情况下,第一个切换处于打开状态

  19. 19

    GNOME 3-底部面板处于隐藏状态-如何取消隐藏或更改行为

  20. 20

    引导程序模板-保持可折叠面板处于打开状态

  21. 21

    当其他下拉菜单处于活动/打开状态时,将自动隐藏/关闭下拉菜单

  22. 22

    默认情况下如何在Nautilus中隐藏侧面板?

  23. 23

    在页面加载中,底部面板应隐藏

  24. 24

    JsTree-面板隐藏时选择节点

  25. 25

    一个引导程序处于活动状态时如何隐藏面板?

  26. 26

    如何从您的公共 IP 隐藏您的 linksys 网页面板

  27. 27

    除非隐藏,否则在执行 php 时启用面板

  28. 28

    SSRS 如何在设计模式下隐藏参数/分组面板

  29. 29

    提交表单时如何隐藏选项面板?

热门标签

归档