javascript - 如何在左右 Pane div 折叠时将主容器 div 宽度扩展为 100%

Question

我创建了一个虚拟 html，在我的示例中，当我单击向左折叠时，左 Pane div 折叠并且主容器 div 自动增长但在右 Pane div 之间放错了位置。我希望所有的 div 在操作过程中都应该显示在同一个地方。

$(function() {
  $("#spnColLeft").on("click", function() {
    if ($(".left").is(':visible')) {
      $(".left").animate({
        width: 'hide'
      });
      $(".mainbody").width($(".left").width() + $(".mainbody").width());
      $(this).html("Expand left");
    } else {
      $(".mainbody").width($(".mainbody").width() - $(".left").width());
      $(".left").animate({
        width: 'show'
      });
      $(this).html("Collapse left");

    }
  });

  $("#spnColRight").on("click", function() {
    if ($(".right").is(':visible')) {
      $(".right").animate({
        width: 'hide'
      });
      $(".mainbody").width($(".right").width() + $(".mainbody").width());
      $(this).html("Expand right");
    } else {
      $(".mainbody").width($(".mainbody").width() - $(".right").width());
      $(".right").animate({
        width: 'show'
      });

      $(this).html("Collapse Right");
    }
  });
});

body {
  margin: 0;
}
[id^=maincontent] {
  margin: 20px 0;
  width: 100%;
  overflow: hidden;
}
div > div {
  height: 100px;
  /*demo*/
  float: left;
}
.mainbody {
  width: 79%;
  background-color: cyan;
}
.left,
.right {
  background-color: yellow;
  width: 10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
  <button id="spnColLeft">colapse Left</button>
  <button id="spnColRight">colapse Right</button>
</div>
<div id="maincontent1">
  <div class="left"></div>
  <div class="mainbody"></div>
  <div class="right"></div>
</div>

Answer 1

有很多方法可以做这件事，但这个是合适的。请快速浏览

$(function() {
  $("#spnColLeft").on("click", function() {
    if ($(".left").is(':visible')) {
      $(".left").animate({
        width: 'hide'
      });
      $(".mainbody").width($(".left").width() + $(".mainbody").width());
      $(this).html("Expand left");
    } else {
      $(".mainbody").width($(".mainbody").width() - $(".left").width());
      $(".left").animate({
        width: 'show'
      });
      $(this).html("Collapse left");

    }
  });

  $("#spnColRight").on("click", function() {
    if ($(".right").is(':visible')) {
      $(".right").animate({
        width: 'hide'
      });
      $(".mainbody").width($(".right").width() + $(".mainbody").width());
      $(this).html("Expand right");
    } else {
      $(".mainbody").width($(".mainbody").width() - $(".right").width());
      $(".right").animate({
        width: 'show'
      });

      $(this).html("Collapse Right");
    }
  });
});

.main {
  margin: 20px 0;
  width: 100%;
  overflow: hidden;
}

.left,
.right {
  background: yellow;
  width: 10%;
  height: 100px;
}

.left { float: left; }

.right { float: right; }


.center {
  height: 100px;
  background-color: cyan;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button id="spnColLeft">colapse Left</button>
  <button id="spnColRight">colapse Right</button>
</div>
<div class="main">

  <div class="left"></div>

  <div class="right"></div>

  <div class="center"></div>

</div>