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

Hiding Panel - by default is open when the page loads

本文关键字：加载情况下默认隐藏更新时间：2023-09-26

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

(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开始隐藏"。关闭"而不是".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 -->

我想你可以做两件事。

 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();
    },

修改如下:

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);的正前方

这里是JSFiddle演示


      
          (function($) {
      
            jQuery(document).ready(function() {
      
              Panel.init();
      
              $(document).on('click', '.tab-controller', function() {
 
  if( $(".panel-content").hasClass('hidden'))
  {
      $(".panel-content").removeClass('hidden').addClass('open');
      $(".tab-controller .show").css('display','none');
  $(".tab-controller .close").css('display','block');
  } else {  $(".panel-content").removeClass('open').addClass('hidden');
      $(".tab-controller .show").css('display','block');
  $(".tab-controller .close").css('display','none'); }
   
             
              });
      
            });
      
            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 .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%;
          }
      
      .hidden
      {
      display:none;
      }
  
   .open
      {
      display:block;
      }
      
      
      
          <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 hidden">
              <div class="content clearfix">
                <div>This
                  <br/>Space
                  <br/>is
                  <br/>inside
                  <br/>panel.</div>
              </div>
              <!-- content -->
            </div>
            <!-- panel-content -->
          </div>
          <!-- panel-wrapper -->


 
    在页面加载中，您可以调用hidePanel() function，它将工作。
    
(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);
.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 -->

  

							相关文章：ROR:如何在不重新加载浏览器的情况下从控制器获取参数
第二组标签及其内容赢得'默认情况下t加载
如何从 API 填充数据并加载到下拉列表中
使用 vent.js 传递参数.如何在触发事件后加载的下一个页面视图中读取该数据
如何加载使用下拉列表生成的新页面更改
使用挖空将数据从数据库加载到下拉列表
将事件处理程序附加到通过PHP加载的下拉选项html
KnockoutJS-将值加载到下拉列表.“选定值”始终为null
如何从属性文件加载html下拉列表
如何基于其他下拉数据加载Jqgrid下拉列表
对加载相关下拉列表的性能影响，最多约30000条记录
加载外部下划线模板
通过AJAX加载(WordPress)下一个帖子页面的特定部分
使用jquery将数据加载到下标按钮中
在页面加载条件下运行JS函数
网页加载向下滚动了一部分
javascript/php获胜't加载依赖下拉列表中第一个选项的数据
使用 javascript 预加载 HTML 下拉列表
在单个文件中加载骨干/下划线模板
计算页面加载到下一小时的第一分钟之间的秒数