javascript - 如果显示元素，想要添加填充 - jquery

Question

所以，我有这个 jQuery 片段:

$("#rectangle").hide();
$("#toggle-rec").click(function () {
      $("#rectangle").toggle(2000);
});

这意味着我的站点中有一个矩形 div，首先我将其隐藏。当有人点击带有 id #toggle-rec 的按钮时，会显示矩形。在下一次单击中，矩形将消失，依此类推。

但是，如果显示矩形，我想这样做，将整个网站(矩形除外)向左填充 200 像素(作为矩形的宽度)，所以:

padding-left:200px;

但是我还是不知道该怎么做。当然如果矩形消失了，我们应该取消 padding-left 什么的。有什么建议吗？

请注意，除矩形外的所有网站都在包装 div 下。

我的 HTML:

<div id="rectangle">
Some text on the rectangle...
</div>
<div id="wrapper">
<!-- A lot of things... -->
<button id="toggle-rec">Toggle rectangle</button>
</div>

Answer 1

这应该有效。请检查演示

$("#rectangle").hide();
$("#toggle-rec").click(function () {
   $("#rectangle").toggle(2000).promise().done(function() { 
     if($("#rectangle").css('display') == 'none') 
     {
       $('body').removeClass('leftMargin');
     }
     else {
       $('body').addClass('leftMargin'); 
     }
   }); 
});

.leftMargin
{
  padding-left:200px;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="rectangle">
Some text on the rectangle...
</div>
<div id="wrapper">
<!-- A lot of things... -->
<button id="toggle-rec">Toggle rectangle</button>
</div>