左右窗格div折叠时如何将主容器div宽度扩展为100％答案

【问题标题】：How to expand main container div width as 100% when left and right pane div gets collapse左右窗格div折叠时如何将主容器div宽度扩展为100％
【发布时间】：2016-02-17 03:18:45
【问题描述】：

我创建了一个虚拟 html，在我的示例中，当我单击左侧折叠时，左窗格 div 会折叠，主容器 div 会自动增长，但在右窗格 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>

【问题讨论】：

标签： javascript jquery html css

【解决方案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>

【讨论】：