点击事件后继续调整div大小答案

【问题标题】：Continue to resize div after click event点击事件后继续调整div大小
【发布时间】：2013-01-10 18:26:24
【问题描述】：

我发现了一些可以做我想做的事情的脚本。这个脚本在点击事件上上下移动我的盒子，并将我的 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 );

              }
           }
      );
 });

【问题讨论】：

标签： jquery html resize window

【解决方案1】：

您需要监听窗口调整大小事件并调整内容容器的大小。

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

【讨论】：

这会去哪里？这是我已经拥有的东西的额外内容还是它取代了某些东西。我将它作为一个单元添加到脚本的末尾，但什么也没发生。
好的，我想通了，而且效果很好。谢谢。对于任何其他新手。我把它放在最后一个});右括号。
@Visualtribe 很高兴你知道了。如果这对您有帮助，请将答案标记为正确。

【解决方案2】：

我的建议是添加一个调整大小的侦听器，并像这样分解出你的实际逻辑：

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

【讨论】：

我认为这里存在语法错误 var container = $( "#content" );
谢谢。当我把它放在我的页面中并点击我的链接时，现在什么都没有发生。