jquery - 单击事件后继续调整 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).on('resize', function() {
    if (container.is(':visible')) {
        container.height(function() {
          return $(window).height() * 0.47;
        });
    }
});