单击事件后继续调整div的大小

Question

我找到了一些我想做的脚本。这个脚本在点击事件时上下移动我的框，并将div的大小调整为窗口高度的百分比。不幸的是，如果有人调整了浏览器窗口的大小，div不会继续调整大小。我试过从点击事件中取出高度窗口函数，并把它放在它下面和/或在这个网站上找到其他调整大小的脚本，但没有发生任何事情。它只在此单击事件时调整大小。你能帮忙吗?

我的div标签固定在浏览器窗口的底部并向上滑动。

jQuery(function( $ ){
   var container = $( "#content" );
   $( "a" ).click(
        function( event ){
           $('#content').height(function(){
           return $(window).height() * 0.47;
           });
           event.preventDefault();
           if (container.is( ":visible" )){
              container.slideUp( 500 );
           } else {
              container.slideDown( 500 );
              }
           }
      );
 });

Answer 1

您需要侦听window resize事件并调整内容容器的大小。

$(window).on('resize', function() {
    if (container.is(':visible')) {
        container.height(function() {
          return $(window).height() * 0.47;
        });
    }
});

Answer 2

我的建议是添加一个resize侦听器，并分解您的实际逻辑，如下所示:

jQuery(function( $ ){
    var resizeFunction = function(event){
       $('#content').height(function(){
            return $(window).height() * 0.47;
       });
       if (event != null){
           event.preventDefault();
       }
       if (container.is( ":visible" )){
          container.slideUp( 500 );
       } else {
          container.slideDown( 500 );
          }
       }
    var container = $( "#content" );
    $( "a" ).click(resizeFunction(event))
    $(window).resize(resizeFunction(null))
});