javascript - 隐藏面板 - 默认情况下在页面加载时打开

Question

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

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

Answer 1

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

现在在您的初始化函数中，设置面板包装器的 css 底部属性。

完成。 =)

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

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