javascript - jQuery toggle() 打破 float div

Question

我已经搜索了几个小时试图解决这个问题，但似乎没有其他人遇到过这个问题。

我有两个 div，一个正常(和内联 block )在左边，一个漂浮在它的右边。当我对它们使用 .toggle() 来隐藏/显示时， float 的会重新出现在其原始位置下方。即使删除了我所有其他代码，这个问题仍然存在:

//Html
<div class="tableWrapper">
    <div class="redDiv"></div>
    <div class="greenDiv"></div>
</div>

//Css stuff here:
.tableWrapper{width:100%}
.redDiv, .greenDiv{width:49%; height:150px;}
.redDiv{
    display:inline-block;
    background-color:red;
}
.greenDiv{
    float:right;
    background-color:green;
}

//My two measly jquery calls...
$(" .redDiv").toggle();
$(" .greenDiv").toggle();

或在 JSFiddle 上:http://jsfiddle.net/0hxc8rr4/

注意:我尝试换掉 jQuery 的“style.display = stuff”调用，但似乎没有帮助。

Answer 1

一旦您切换，jQuery 将重新定义 display 属性。您可以简单地将 float:left 添加到红色 block 类，它应该可以修复它。或者如前所述，在每次调用后重新定义它。但是，如果您已经在 float 一个元素，那么 float 另一个元素也是有意义的。

http://jsfiddle.net/0hxc8rr4/2/