0

我正在使用一个脚本来允许用户在视图模式（网格、列表和完整）之间切换。当用户更改视图模式时，活动视图淡出而选定的淡入。在此过渡期间，有空白空间，并且由于我的网站是响应式的，我不想为内容设置固定的最大高度。

从下面可以看出，切换视图模式时页脚会向上跳..

http://fiddle.jshell.net/9ae3T/12/

现在有没有人可以在每次设置视图模式时为内容设置新的最大高度？（从而避免暂时的负空间并调整到活动内容的高度？）

HTML：

 <ul class="tabs js-view-mode">
      <li><a href="#list">List</a></li>
      <li><a href="#grid">Grid</a></li>
      <li><a href="#full">Full</a></li>
    </ul>

    <section id="viewMode" class="content">
      <div id="list">here is list mode content</div>
      <div id="grid">here is grid mode content</div>
      <div id="full">here is full mode content</div>
    </section>

<footer></footer>

查询：

$(document).ready(function(){
  var wrap = $('#viewMode'),
      viewMode = $.cookie( 'view-mode' );
  wrap.children().hide();

  $('.js-view-mode').on( 'click', 'a',function( e ){
    e.preventDefault();
    var t = $(this),
        type = t.attr('href');

   wrap.children().fadeOut(); $(type).delay(500).fadeIn();

    viewMode = $.cookie( 'view-mode', type );

  });

  if ( viewMode ) {
    $('.js-view-mode a[href='+ viewMode +']').trigger('click');
  } else {
    $('.js-view-mode li:first a').trigger( 'click' );
  }

});

CSS（用于演示目的）：

footer {background: red; display: block; width: 100%; height: 5px}

#list {height: 20px; width: 100%;display: block}
#grid {height: 55px; width: 100%;display: block}
#full {height: 100px; width: 100%;display: block}

/*.content {THIS NEEDS TO BE SET TO THE ACTIVE VIEWMODE CONTENT HEIGHT} */
4

1 回答 1

1

这是一个工作示例 http://fiddle.jshell.net/9ae3T/17/

修改是：

 var lheight = $("#viewMode").height();
      if(lheight != 0){
   $("#viewMode").css("height",lheight+"px");         
      }
      wrap.children().fadeOut(); $(type).delay(500).fadeIn(function(){
          $("#viewMode").css("height","auto");
      });

我已经取了div的高度（你可以摆脱糟糕的!= 0测试，它只是为了防止第一次显示的修改）。在更改视图类型之前，我强制设置 div 的高度。在fadeIn回调中，我将 div 的高度设置为自动...

于 2013-06-03T00:04:49.677 回答