隐藏另一个时动态扩展 div

Question

我是在这个网站上发帖的新手，所以请原谅我可能犯的任何错误。

所以正如我的问题所述，我本质上是在寻找一种动态扩展 div 的方法。到目前为止，我有一个容器 div，里面有三列。每列都有一个指向某些 javascript 的链接，这些 javascript 将其设置为 disply:none。我正在寻找一种方法，例如，如果我要单击中心列中的隐藏按钮，我希望两个外列展开以占用留下的空间。也许是一种在隐藏中间的时候将两者的宽度从 33% 增加到 50% 的方法。

这样其他两个 div 基本上共享它们之间新创建的空间。

这是我现在的 html 和 css：

HTML：

<div id="col2outer">

        <div id="col1">
            <p>test</p>
            <a href="javascript:hideshow(document.getElementById('col1'))">Hide</a>
        </div>

        <div id="col2mid">
            <p>test</p>
            <a href="javascript:hideshow(document.getElementById('col2mid'))">Hide</a>
        </div>


        <div id="col2side">
            <p>test</p>
            <a href="javascript:hideshow(document.getElementById('col2side'))">Hide</a>
        </div>

    </div>

CSS：

 #container #col2outer {
 height:200px;
 width: 870px;
 float: left;
 margin: 0;
 padding: 0;
 }

 #container #col1 {
 height:200px;
 width: 33%;
 float: left;
 border-width: 0.5mm; border-style: groove;
 -moz-border-radius: 15px;
 border-radius: 15px;
 }


 #col2outer #col2mid {
 height:200px;
 width: 33%;
 float: left;
 border-width: 0.5mm; border-style: groove;
 -moz-border-radius: 15px;
 border-radius: 15px;
 }

 #col2outer #col2side {
 height:200px;
 width: 33%;
 float: left;
 border-width: 0.5mm; border-style: groove;
 -moz-border-radius: 15px;
 border-radius: 15px;
 }

提前感谢您的帮助，如果这个问题已经被问到，我们深表歉意

Answer 1

喂！

你可以试试这样的：

点击隐藏按钮：

$(document).ready(function(){
  $('button').click(function(){
    $('#col1').css("display","none");
    $('#col2mid').css("width","49%");
    $('#col2side').css("width","49%");
  })
});

这是调整 div 大小的非常简单的方法...

如果你想点击coloumn然后隐藏/显示和调整你需要重命名你的列，否则你的代码会很长......

编辑：

类似这样的：

http://jsfiddle.net/pbnkH/