Javascript 如果另一个div被隐藏，div宽度调整为100%

当

#rightdiv

处于隐藏状态时，如何将

#leftdiv

的宽度设置为100%，当单击按钮时，两个

应相邻

我已经在点击按钮时看到了两个相邻的

，但我想在

#rightdiv

隐藏时将

#leftdiv

扩展到100%

函数toggleSideBar（）{
var div=document.getElementById（'rightdiv'）；
如果（div.style.display！=“无”）{
div.style.display='none'；
}否则{
div.style.display='block'；
}		
};
#leftdiv
{
边缘：实心中厚；
浮动：左；
显示：内联块；
背景色：#ffc；
/*边框：1px纯红*/
}
#右舵
{
宽度：50%；
边缘：实心中厚；
背景色：#ffa；
显示：无；
浮动：对；
}

可选的
右面板
`
类似这样的东西


如果将宽度设置为
表格单元格
s:


函数切换边栏（）{
var div=document.getElementById（'rightdiv'）；
如果（div.style.display！=“无”）{
div.style.display='none'；
}否则{
div.style.display='表格单元格'；
}	
};
#leftdiv{
边缘：实心中厚；
宽度：自动；
显示：表格单元格；
背景色：#ffc；
}
#右舵{
宽度：50%；
边缘：实心中厚；
背景色：#ffa；
显示：无；
}
#主要内容{
显示：表格；
宽度：100%；
}

可选的
右面板
`
这就是你想要的

我们在这里做的是告诉div要灵活，尊重他们的内容

与
浮动
、
块
或
内联块
不同，这将在不考虑页面宽度的情况下工作，并将它们并排放置


函数切换边栏（）{
var div=document.getElementById（'rightdiv'）；
如果（div.style.display！=“无”）{
div.style.display='none'；
}否则{
div.style.display='表格单元格'；
}
};
#主要内容{
显示：表格；
宽度：100%；
表布局：固定；
}
.细胞{
显示：表格单元格；
垂直对齐：顶部；
宽度：100%；
}
#左撇子{
边缘：实心中厚；
背景色：#ffc；
/*边框：1px纯红*/
}
#右舵{
边缘：实心中厚；
背景色：#ffa；
显示：无；
}

可选的
右面板
`
请检查以下代码：

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>

JS

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

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

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

};

您还可以在以下位置检查此代码的运行示例：

我只想使用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>

JS

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

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

您的示例没有按您希望的那样工作的主要原因是使用了
float
。
浮动会导致元素只占用其内容所需的空间。
使用float时，必须对左侧容器使用
width:100%
来解决此问题。
要使其从50%宽度动态切换到100%宽度，还需要在切换功能中在这两种宽度之间切换样式

对于flexbox，所有这些都不再是必需的，因为它的子项将按照您想要的方向自动排序，在本例中为一行。设置
flex:1自动
对于这两个容器，使它们平均地增长和收缩，以占据它们可以获得的所有空间。（
flex:1 0 auto；
在这里也可以使用，因为收缩行为在本例中没有任何区别。）
这没有达到预期效果，div没有以全宽开始。感谢您的更新。但切换按钮有一个问题，它也随着div的移动而移动
<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>

#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;
}

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

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