堆栈内存溢出
  繁体   English   中英

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

[英]Hiding Panel - by default is open when the page loads

 原文  2015-07-27 09:47:55  4   5    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 个解决方案

解决方案1
 1 已采纳  2015-07-27 10:16:06

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

解决方案2
 0  2015-07-27 09:56:28

我想您可以做两件事。 

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

解决方案3
 0  2015-07-27 10:00:30


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

解决方案4
 0  2015-07-27 10:05:51

在页面加载中，您可以调用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 -->

解决方案5
 0  2015-07-27 10:24:59

更改此： 

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);之前})(jQuery);

这是JSFiddle演示

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在页面加载时默认情况下打开一个Accordin 页面加载时打开灯箱 页面加载时可折叠 页面加载时隐藏div，几秒钟后显示 获取页面加载时显示的默认值 为页面加载时加载的.click函数指定默认值 页面加载时打开Javascript手风琴菜单 页面加载时可折叠菜单始终打开 页面加载时打开第一部分 加载页面时如何使面板打开
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM