2

やりたいことを実行するスクリプトの一部を見つけました。このスクリプトは、クリック イベントでボックスを上下に移動し、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 );

              }
           }
      );
 });
4

2 に答える 2

0

You need to listen for the window resize event and resize the content container.

$(window).on('resize', function() {
    if (container.is(':visible')) {
        container.height(function() {
          return $(window).height() * 0.47;
        });
    }
});
于 2013-01-10T18:41:26.797 に答える
0

私が提案するのは、サイズ変更リスナーを追加し、実際のロジックを次のように分解することです。

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))
});
于 2013-01-10T18:34:21.393 に答える