可変幅で水平方向にDivを切り替えます

Question

これは説明が難しいかもしれません。

以下のコードを使用して、部分的にウィンドウの外にあるdivを水平方向に戻したり、再び戻したりします。これは動作しますが、私には2つの問題があります。

私が切り替えているdivは、ウィンドウ幅（vw）に応じて可変幅を持ち、ウィンドウ幅ごとに同じvw単位数がありません。これは、異なるウィンドウ幅のメディアクエリによって制御されます。

これは、divが部分的にウィンドウから外れるように切り替えるときに問題が発生し、ウィンドウを拡大/縮小すると、画面に表示されるdivの量が変更されます。また、divを画面内に完全に戻すと、幅はウィンドウサイズのメディアクエリに一致しません。

私がやりたいことは、ウィンドウのサイズにかかわらず常にdivの左に同じ量のdivを残してdivをオフに切り替えることです。また、画面のdivを切り替えると、divがその時点でのウィンドウサイズのメディアクエリに従って幅を占めるようになります。

So： （部分的に）表示を外すと、divはメディアクエリに応じてウィンドウの幅が変化するように拡大します。しかし、それでも私はdivがウィンドウ内に80ピクセルしか表示しないようにしたい。 divをフルビューでもう一度切り替えると、メディアクエリ設定に従って正しい幅になります。

おそらくこれは 部分的にウィンドウから切り離されたときにdivが正しい位置合わせを必要とするようです。したがって、ウィンドウのサイズを変更すると、divの幅のサイズが変更されても、ウィンドウに表示される方法には影響しません。 divはウィンドウのサイズを小さくするか大きくするので、80 pxのままです。しかし、divが画面に完全に表示されるように切り替えると、再び左に揃える必要があります。どういうわけか、これはどのようにコード化されますか？

JSFIDDLE Here。誰でも助けてくれますか？

これは私のコードです：

$(document).ready(function() { 
     $("#togglebutton").click(function() { 
     if($(this).hasClass('active')){ 

     $(this).removeClass('active'); 
     $("#myToggleDiv").animate({ 
       left: '0%' 
     }); 
     }else{ 
     $(this).addClass('active'); 
     $("#myToggleDiv").animate({ 
       left: -$('#myToggleDiv').width() + 80 
     }); 
     } 


     }); 
    }); 

Answer 1

どのように80pxの余白に調整を加えること、および位置決めのために100％の幅を使用してはどうですか？

$(document).ready(function() { 
     $("#togglebutton").click(function() { 
     if ($(this).hasClass('active')) { 

      $(this).removeClass('active'); 
      $("#myToggleDiv").animate({ 
      left: '0%', 
      'margin-left': '0' 
      }); 
     } else { 
      $(this).addClass('active'); 
      $("#myToggleDiv").animate({ 
      left: '-100%', 
      'margin-left': '80px' 
     }); 
    } 


    }); 
});