javascript - jQuery toggle()打破 float div

我一直在寻找解决此问题的时间，但似乎没有其他人遇到此问题。

我有两个div，左边是一个普通的（和内联块），一个很好地漂浮在它的右边。当我在它们上使用.toggle（）进行隐藏/显示时，浮动的对象会重新显示在其原始位置下方。
即使我的所有其他代码都被删除了，这个问题仍然存在：

//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”调用，但这似乎无济于事。

最佳答案

切换后，jQuery将重新定义display属性。您可以简单地将float:left添加到红色块类中，并且应该对其进行修复。或如上所述，在每次调用后重新定义它。但是，如果您已经在浮动一个元素，那么就应该浮动另一个元素。

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