Question

所以，我有这个jQuery片段：

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

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

但是，我想这样做，如果显示矩形，填充左侧整个网站（矩形除外）200 px（作为矩形的宽度），所以：

padding-left:200px;

但我仍然不知道该怎么做。当然，如果矩形消失，我们应该取消填充左边的东西。有什么建议吗？

请注意，除矩形之外的所有网站都在包装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>

Answer 2

你可以使用.toggleClass。

$("#rectangle").hide();
$("#toggle-rec").click(function () {
  $("#rectangle").toggle(1000);
  $("#wrapper").toggleClass("leftpadwrapper")
});

这是一个小提琴：https://jsfiddle.net/0kswh693/4/

这会激活它

#wrapper{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

Answer 3

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

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

Answer 4

#rectangle
{
  background: black;
  height: 100px;
  width: 200px;
  color: #fff;
}
.body-left-padding
{
  padding-left: 200px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="rectangle">
    Some text on the rectangle...
</div>
<div id="wrapper">
    <!-- A lot of things... -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat est magna, vel vehicula augue efficitur ac. Vestibulum imperdiet eros dolor, ac vulputate felis tempor hendrerit. Ut eleifend diam ligula, ut ullamcorper est laoreet non. Mauris blandit risus in mi elementum, in feugiat ligula aliquet. Ut consequat at dolor nec scelerisque. Nullam condimentum fringilla dui non maximus. Ut sit amet erat ac eros viverra porttitor. Cras lobortis eleifend lacus eu egestas. Aenean pellentesque, erat eu dignissim congue, neque mi semper mauris, et eleifend leo dolor nec mi. Vivamus et vehicula magna. Aenean sit amet tincidunt quam, quis dapibus nisi. Aenean suscipit sem enim, sit amet rutrum urna tincidunt eu.</p>
    <button id="toggle-rec">Toggle rectangle</button>
</div>

sessionStorage

Answer 5

试试这个：

<!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>

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

5 个答案: