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

时间：2015-07-27 09:47:55

标签： javascript jquery html css dom

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

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

5 个答案:

答案 0 :(得分：1)

在你的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 -->

答案 1 :(得分：0)

我想你可以做两件事。

 var Panel = {
    isVisible: true,
    showMessage: null,
    hideMessage: null,
    animationDuration: 650,
    animationEasing: 'linear',
    init: function() {
    },

首先尝试设置应将可见性设置为加载时隐藏的isVisible: false。 如果这不起作用，您可以恢复第一次编辑并添加init函数

 var Panel = {
    isVisible: true,
    showMessage: null,
    hideMessage: null,
    animationDuration: 650,
    animationEasing: 'linear',
    init: function() {
        Panel.hidePanel();
    },

答案 2 :(得分：0)

background: url("/img/banner-bg.jpg");
background-repeat: no-repeat;
height: 80%;
background-attachment: fixed;
background-position: center center;
background-size: contain;

答案 3 :(得分：0)

在页面加载中，您可以调用hidePanel() function它将起作用。

＆＃13;
＆＃13; 
(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() {

/*add this code*/

  $('.panel-wrapper').css("bottom", -$('.panel-content').height() + 'px');
    $(".close").css("display", "none");
    $(".show").css("display", "inline");

    },

    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);
＆＃13; 
.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%;
}
＆＃13; 
<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 -->
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

改变这个：

init: function() {

},

到此：

init: function () {
    $('.panel-wrapper').css("bottom", -$('.panel-content').height() + 'px');
    $(".close").css("display", "none");
    $(".show").css("display", "inline");
},

改变这个：

isVisible: true,

到此：

isVisible: false,

在Panel.init();

之前移动})(jQuery);

Here is the JSFiddle demo

相关问题
最新问题