Question

我有一个宽度为100％的div #more和包含我内容的高度auto。

我希望调整div以调整链接点击时的窗口高度。

我的脚本几乎有效，我点击链接，我看到滚动条变小了（证明窗口已经调整大小但是div只调整后第一次滚动行动......为什么会这样？:(

SCRIPT

$(document).ready(function(){
            $( "#target" ).click(function(){
  function resizeSection(tag) {
    var docHeight = $(window).height();  // Get the height of the browser window
    var docWidth = $(window).width();    // Get the width of the browser window
    $(tag).css({'height': docHeight + 'px', 'width': docWidth + 'px', 'display': 'block'});
  }
  $('#more').each(function(){  
    resizeSection(this);  // Call the function and make sure to pass 'this'
  });
  $(window).resize(function() {
    $('#more').each(function(){
      resizeSection(this);
    });
  });
});
});

这就是触发器：<div id="target">click</div>

Answer 1

首先：把更多的div放在身体的开头。如果我理解你清楚，你不需要在一个元素上的每个功能。试试这个。它的工作正常，如果你想要的话

$( "#click" ).click(function() {
    //with outerHeight and width you get size including margin and padding       
    var docHeight = $(document).outerHeight(true);  // Get the height of the document window
    var docWidth = $(document).outerWidth(true);    // Get the width of the document window

    $('#more').css({

      "width": docWidth + "px",
      "height": docHeight + "px",
      "position": "absolute",//if this div is main container you don't need this 
      "top" :0,//and this 
      "left": 0,//and this
      "z-index": 1111//and this


    });

});

Answer 2

我找到了一种很好的方法来实现这一点，并且容器调整大小以适应窗口高度非常平滑和可爱。

$('.more').click(function(){
    var isFullscreen = false;
    var d = {};
    var speed = 900; 
    if(!isFullscreen){ // MAXIMIZATION - maximize the container to fit window
        d.height = $(window).height();; 
        isFullscreen = true;
    }
    else{ // MINIMIZATION - minimize the container to a predifined size   
        d.height = 500px;            
        isFullscreen = false;
    }

    $(this).animate(d,speed)
    })

单击时调整窗口高度

2 个答案: