javascript - 如果隐藏另一个 div，则 div 宽度调整为 100%

Question

如何设置 #leftdiv 的宽度当 #rightdiv 时变为 100%被隐藏，当点击按钮时，<div> s应该是挨着的。

我已经得到了 <div>单击按钮时彼此相邻，但我想展开 #leftdiv当 #rightdiv 时变为 100%是隐藏的。

function toggleSideBar() {		
    var div = document.getElementById('rightdiv');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    } else {
        div.style.display = 'block';
    }		
};

#leftdiv
{
   border: solid medium thick;
   float: left;
   display: inline-block;
   background-color: #ffc;
   /*border: 1px solid red;*/
}

#rightdiv
{
   width: 50%;
   border: solid medium thick;
   background-color: #ffa;
   display: none;
   float:right;
}

<input type="button" id="btn" value="toggle" onclick="toggleSideBar()" />
    <div id="main-content">
        <div id="leftdiv">selectable</div>
        <div id="rightdiv">right panel</div>
    </div>`

Answer 1

我会为此使用 flex box:

HTML

<input type="button" id="btn" value="toggle" onclick="toggleSideBar()" />
<div id="main-content">
  <div id="leftdiv">selectable</div>
  <div id="rightdiv">right panel</div>
</div>

CSS

#main-content {
  display: flex;
  flex-flow: row nowrap;
}

#leftdiv {
  background-color: #ffc;
  flex: 1 1 auto;
  border: 1px solid red;
}

#rightdiv {
  flex: 1 1 auto;
  background-color: #ffa;
  display: none;
  border: 1px solid green;
}

JS

function toggleSideBar() {  
    var div = document.getElementById('rightdiv');

    if (div.style.display !== 'none') {
        div.style.display = 'none';
    } else {
        div.style.display = 'block';
    }
};

您的示例未按预期运行的主要原因是使用了float。 float 使元素仅占据其内容所需的空间。 使用 float ，您必须对左侧容器使用 width:100% 来解决此问题。 要使其从 50% 宽度动态切换到 100% 宽度，还需要在切换函数中在这两者之间切换样式。

使用 flexbox 所有这些都不再是必需的，因为它的子元素会自动按照你想要的方向排序，在本例中是一行。为两个容器设置 flex: 1 1 auto; 使它们均匀地增长和收缩以占据它们可以获得的所有空间。 (flex: 1 0 auto; 也适用于此，因为收缩行为在此示例中没有任何区别。)