Javascript 如果显示项，则要添加填充-jquery_Javascript_Jquery_Html_Css

Javascript 如果显示项，则要添加填充-jquery

javascript jquery html css

Javascript 如果显示项，则要添加填充-jquery,javascript,jquery,html,css,Javascript,Jquery,Html,Css,因此，我有一个jQuery代码片段： $("#rectangle").hide(); $("#toggle-rec").click(function () { $("#rectangle").toggle(2000); }); 这意味着我在我的网站上有一个Rectangle div，首先我隐藏了他。当有人单击id为#toggle rec的按钮时，将显示矩形。在下一次单击中，矩形将消失，依此类推但是，我想这样做，如果显示矩形，则填充使整个网站（矩形除外）保持200 px（作为矩形的

因此，我有一个jQuery代码片段：

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

这意味着我在我的网站上有一个Rectangle div，首先我隐藏了他。当有人单击id为

#toggle rec

的按钮时，将显示矩形。在下一次单击中，矩形将消失，依此类推

但是，我想这样做，如果显示矩形，则填充使整个网站（矩形除外）保持200 px（作为矩形的宽度），因此：

但我还是不知道怎么做。当然，如果矩形消失了，我们应该取消左边的填充或其他。有什么建议吗

请注意，除矩形外的所有站点都位于包装器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>


矩形上的一些文本。。。
切换矩形

我猜你想要这样的东西。有了上面提供的信息，我可以提供这个解决方案

$("#toggle-rec").click(function () {
 $("#rectangle").toggle(function(){
   if($('#rectangle').is(':visible')){
    $('body').css({'padding-left':'200px'})
   }
   else{
    $('body').css({'padding-left':0})
   }
 });
});

我猜你想要这样的东西。有了上面提供的信息，我可以提供这个解决方案

$("#toggle-rec").click(function () {
 $("#rectangle").toggle(function(){
   if($('#rectangle').is(':visible')){
    $('body').css({'padding-left':'200px'})
   }
   else{
    $('body').css({'padding-left':0})
   }
 });
});

$（“#矩形”）.hide（）；
$（“#切换记录”）。单击（函数（）{
$（“#矩形”）。切换（2000）；
如果（$（“#矩形”）为（“：可见”））
{
$（“#wrapper”）.removeClass（“body left padding”）；
}
其他的
{
$（“#包装器”）.addClass（“正文左填充”）；
}
});
#矩形
{
背景：黑色；
高度：100px；
宽度：200px；
颜色：#fff；
}
.车身左侧衬垫
{
左侧填充：200px；
}

矩形上的一些文本。。。
Lorem ipsum dolor sit amet，是一位杰出的献身者。最重要的一点是，车辆的速度和效率，如前庭的速度和时间。但直径要小得多，而直径要小得多。毛里斯·布兰迪特·里苏斯在《我的元素》中，在《封建主义的舌苔》中。在多洛尔nec监狱举行的会议。非马克西姆斯弗林利亚酒后调味品。我坐在埃米特·埃罗斯·维韦拉·波特托的座位上。这是一个很好的例子。埃尼安·佩伦茨克，欧盟政要康格，我是森佩尔·莫里斯，还有利奥·多洛·内克。维瓦摩斯和大车辆。你坐在那里，我就在那里。埃涅阿斯·塞姆尼（Aenean suscipit sem enim）是一位杰出的作家，他是一位杰出的作家
切换矩形

$（“#矩形”）.hide（）；
$（“#切换记录”）。单击（函数（）{
$（“#矩形”）。切换（2000）；
如果（$（“#矩形”）为（“：可见”））
{
$（“#wrapper”）.removeClass（“body left padding”）；
}
其他的
{
$（“#包装器”）.addClass（“正文左填充”）；
}
});
#矩形
{
背景：黑色；
高度：100px；
宽度：200px；
颜色：#fff；
}
.车身左侧衬垫
{
左侧填充：200px；
}

矩形上的一些文本。。。
Lorem ipsum dolor sit amet，是一位杰出的献身者。最重要的一点是，车辆的速度和效率，如前庭的速度和时间。但直径要小得多，而直径要小得多。毛里斯·布兰迪特·里苏斯在《我的元素》中，在《封建主义的舌苔》中。在多洛尔nec监狱举行的会议。非马克西姆斯弗林利亚酒后调味品。我坐在埃米特·埃罗斯·维韦拉·波特托的座位上。这是一个很好的例子。埃尼安·佩伦茨克，欧盟政要康格，我是森佩尔·莫里斯，还有利奥·多洛·内克。维瓦摩斯和大车辆。你坐在那里，我就在那里。埃涅阿斯·塞姆尼（Aenean suscipit sem enim）是一位杰出的作家，他是一位杰出的作家
切换矩形
您可以直接使用.toggleClass
$("#rectangle").hide();
$("#toggle-rec").click(function () {
  $("#rectangle").toggle(1000);
  $("#wrapper").toggleClass("leftpadwrapper")
});

这是一把小提琴：
这使它充满活力
#wrapper{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

您可以直接使用.toggleClass
$("#rectangle").hide();
$("#toggle-rec").click(function () {
  $("#rectangle").toggle(1000);
  $("#wrapper").toggleClass("leftpadwrapper")
});

这是一把小提琴：
这使它充满活力
#wrapper{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

这应该行得通。请查看演示

$（“#矩形”）.hide（）；
$（“#切换记录”）。单击（函数（）{
$（“#矩形”）.toggle（2000）.promise（）.done（function（）{
if（$（“#矩形”）.css（'display'）=='none'）
{
$（'body'）.removeClass（'leftMargin'）；
}
否则{
$（'body'）.addClass（'leftMargin'）；
}
}); 
});
.leftMargin
{
左侧填充：200px；
}

矩形上的一些文本。。。
切换矩形
这应该行得通。请查看演示

$（“#矩形”）.hide（）；
$（“#切换记录”）。单击（函数（）{
$（“#矩形”）.toggle（2000）.promise（）.done（function（）{
if（$（“#矩形”）.css（'display'）=='none'）
{
$（'body'）.removeClass（'leftMargin'）；
}
否则{
$（'body'）.addClass（'leftMargin'）；
}
}); 
});
.leftMargin
{
左侧填充：200px；
}

矩形上的一些文本。。。
切换矩形
试试这个：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("#rectangle").hide();
   isPadding = false;
   padding_left = 0;
   $("#toggle-rec").click(function () {
        if(isPadding){
         //$("#rectangle").toggle(2000);
         //$("#rectangle" ).contents().css("color", "red");
         padding_left = 0;
         isPadding = false;
         }
        else{
         padding_left = 20;
         isPadding = true;
        }
        $("#rectangle").toggle(2000);       
        $("#rectangle" ).children().css("padding-left", padding_left);
   });
});
</script>
</head>
<body>

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


$（文档）.ready（函数（）{
$（“#矩形”）.hide（）；
isPadding=false；
填充左=0；
$（“#切换记录”）。单击（函数（）{
如果（添加）{
//$（“#矩形”）。切换（2000）；
//$（“#矩形”）.contents（）.css（“颜色”、“红色”）；
填充左=0；
isPadding=false；
}
否则{
左侧填充=20；
isPadding=true；
}
$（“#矩形”）。切换（2000）；
$（“#矩形”）.children（）.css（“左填充”，左填充）；
});
});
矩形上的一些文本。。。
切换矩形
试试这个：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("#rectangle").hide();
   isPadding = false;
   padding_left = 0;
   $("#toggle-rec").click(function () {
        if(isPadding){
         //$("#rectangle").toggle(2000);
         //$("#rectangle" ).contents().css("color", "red");
         padding_left = 0;
         isPadding = false;
         }
        else{
         padding_left = 20;
         isPadding = true;
        }
        $("#rectangle").toggle(2000);       
        $("#rectangle" ).children().css("padding-left", padding_left);
   });
});
</script>
</head>
<body>

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


$（文档）.ready（函数（）{
$（“#矩形”）.hide（）；
isPadding=false；
填充左=0；
$（“#切换记录”）。单击（函数（）{
如果（添加）{
//$（“#矩形”）。切换（2000）；
//$（“#矩形”）.contents（）.css（“颜色”、“红色”）；
填充左=0；
isPadding=false；
}
否则{
左侧填充=20；
isPadding=true；
}
$（“#矩形”）。切换（2000）；
$（“#矩形”）.children（）.css（“左填充”，左填充）；
});
});
矩形上的一些文本。。。
切换矩形
请提供您的HTML地址