divの表示/非表示を切り替える

Question

以下のコードを使用して、divを画面から部分的に切り替え、画面に完全に戻します。このコードは、「サイドバー」がオフスクリーンからどれだけ離れて移動するかを示します。しかし、私の場合、サイドバーの幅に適用されるメディアクエリのために、この機能に問題があります。したがって、サイドバーがどのくらい移動するかを記述しないようにするコードが必要ですが、画面上に表示されるサイドバーの量はピクセル単位で表示されます。 The demo here（メディア照会あり）。

$(document).ready(function() { 
    $("#toggle").click(function() { 
     if($(this).hasClass('active')){ 
     $(this).removeClass('active'); 
     $("#sidebar").animate({ 
      left: '0%' 
     }); 
     } else { 
     $(this).addClass('active'); 
     $("#sidebar").animate({ 
      left: '-55%' 
     }); 
     } 
    }); 
}); 

Answer 1

SOLVED !!

SEE DEMO HERE

$(document).ready(function() { 
    $("#togglebutton").click(function() { 
    var $container = $('#myToggleDiv'); 
    $container.toggleClass('hide'); 
    }); 
}); 

Answer 2

シンプルな数学：

あなたはサイドバーが画面上に残って40ピクセル、残り隠しを持ちたいと言います。だからあなたはそれを左に動かしたい（幅 - 40）。私。

$(document).ready(function() { 
 
     $("#toggle").click(function() { 
 
      if($(this).hasClass('active')){ 
 
       $(this).removeClass('active'); 
 
       $("#sidebar").animate({ 
 
        left: '0%' 
 
      }); 
 
     } else { 
 
      $(this).addClass('active'); 
 
      $("#sidebar").animate({ 
 
       left: - ($("#sidebar").width() - 40) 
 
      }); 
 
     } 
 
    }); 
 
});

html, body { 
 
    width:100%; 
 
    height: 100%; 
 
} 
 
#header { 
 
    width: 100%; 
 
    height: 20%; 
 
    float: left; 
 
    border: 1px solid; 
 
} 
 

 
#sidebar { 
 
    width: 70%; 
 
    height: 80%; 
 
    position: relative; 
 
    border: 1px solid; 
 
} 
 
#toggle { 
 
    width: 10%; 
 
    height: 40%; 
 
    margin-right: 6.5%; 
 
    margin-top: 3.5%; 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="sidebar">SIDEBAR<input type="button" value="Toggle" id="toggle"></div>

Answer 3

代わりの割合で負の左側の値を設定し、あなたの要素の幅を使用して、要素の幅に応じて、左の値を設定：

$("#sidebar").animate({ 
    left: '-' + ($("#sidebar").width()*0.55) + 'px' 
}); 

はこれをチェックスニペット：

$(document).ready(function() { 
 
    $("#toggle").click(function() { 
 
    if ($(this).hasClass('active')) { 
 
     $(this).removeClass('active'); 
 
     $("#sidebar").animate({ 
 
     left: '0' 
 
     }); 
 
    } else { 
 
     $(this).addClass('active'); 
 
     $("#sidebar").animate({ 
 
     left: '-' + ($("#sidebar").width()*0.55) + 'px' 
 
     }); 
 
    } 
 
    }); 
 
});

html, body { 
 
    width:100%; 
 
    height: 100%; 
 
} 
 
#header { 
 
    width: 100%; 
 
    height: 20%; 
 
    float: left; 
 
    border: 1px solid; 
 
} 
 

 
#sidebar { 
 
    width: 70%; 
 
    height: 80%; 
 
    position: relative; 
 
    border: 1px solid; 
 
} 
 
#toggle { 
 
    width: 10%; 
 
    height: 40%; 
 
    margin-right: 6.5%; 
 
    margin-top: 3.5%; 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="sidebar">SIDEBAR<input type="button" value="Toggle" id="toggle"></div>