Question

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

正如我的问题所述，我基本上正在寻找一种动态扩展div的方法。到目前为止，我有一个容器div，里面有三列。每个列都有一个链接到一些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

HY！

您可以尝试以下内容：

点击隐藏按钮：

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

这是调整div的简单方法......

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

修改

这样的事情：

http://jsfiddle.net/pbnkH/

隐藏另一个动态扩展div

1 个答案: