0

我一直在构建一个包含可扩展部分的表单。使用 jquery 的 hide() 和 show() 方法切换 div。

在 Chrome 和 FF 中一切正常，但在 IE 中，包含其他 div 的主 div 在其中打开一个部分时不会扩展以适应。

我尝试更改各种属性，例如设置容器 div 的高度，

<div id='form'>

    <form id='form2'>
        // some form fields
        <div id="section1" style="display: none">
          // more fields
        </div>
        <div id="section2" style="display: none">
          // more fields
        </div>
    </form>

</div>

因此，当我在 #section1 或 #section2 上调用 show() 时，#form 并没有扩展，只是保持相同的高度，实际扩展和关闭的 div 似乎工作正常，它们只是没有很好的容器在后面他们。

更新 感谢大家的帮助-我现在提供更多信息。

请访问此处查看有问题的页面：表单页面并按提交（我已在表单中填写了一些测试数据）。然后您将看到第二个表单页面，这是有问题的页面。

两个部分中的绿色图标控制 div，这是第一部分的 jQuery 脚本，因为它们都是相同的：

var toggleMinus = 'wp-content/uploads/2010/01/delete.png';
var togglePlus = 'wp-content/uploads/2010/01/add.png';

$("#openelec").click(function() // when button clicked
{
    var toggleSrc = $(this).attr('src'); // check which icon is shown
    if(toggleSrc == toggleMinus) // if it is a minus
    {
        $(this).attr('src', togglePlus); // change to plus
        $(".elecsite").slideUp(1500); // close the div
    }
    else
    {
        $(this).attr('src', toggleMinus); // change to minus
        $(".elecsite").slideDown(1500); // open the div 
    };
});

在 Chrome 或 FF 中查看，您将看到我希望它如何操作 - 在 IE 中它只是不玩球。

这也是css：（只有主div和一个扩展的）

#form{
width: 770px;
background: #DDEEEE;
padding: 10px;
border-top: 1px solid #c60;
height: auto;
text-align: left;

-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
.elecsite{
width: 760px;
height: auto;
background: #EFE0E0;
padding: 5px;
border-bottom: 1px solid #DF7401;
float: left;
}

因此，让我们看看你们中是否有任何疯狂的程序员可以帮助我；）感谢您的帮助。

4

2 回答 2

3

第 1 节和第 2 节是浮动的吗？如果是这样，在可扩展的 div 之后添加一个带有 clear:both 的 div ..

于 2010-01-14T17:30:36.640 回答
0

解决了！我知道一旦我发布了所有这些信息，它就会跳入我的脑海！

问题是我想要扩展的容器 div 的角使用 curvycorners 弯曲 - 这意味着我猜 IE 无法重新渲染它，所以我只是取消了四舍五入并在下面添加了另一个带有圆角的 div。

感谢帮助过的人。

于 2010-01-15T14:12:23.670 回答