我在safari中包含2个浮动元素的div的宽度有问题.
其中一个浮动div的宽度设置为0,并在点击事件中使用jquery扩展. safari中的父容器保留两个div的宽度,即使宽度设置为0也是如此.
这里有一个例子,除了Safari之外的所有东西.
http://jsfiddle.net/XUR7R/6/
HTML:
<div class="item-list"> <ul> <li class="article"> <div class="column"> Column 1<br/> <a href="#" class="expand">toggle</a><br/> </div> <div class="column expandableColumn"> Column 2 content </div> </li> </ul> </div>
CSS
.item-list{ overflow:hidden; } .article{ float:left; overflow:hidden; background:#555; padding:5px; } .column{ float:left; height:100px; width:100px; background:red; } .expandableColumn{ width:0; }
使用Javascript
$(document).ready(function() { $('.expand').click(function() { if ($(this).hasClass('.expanded')) { $('.expandableColumn').animate({ 'width': '0px' }); } else { $('.expandableColumn').animate({ 'width': '100px' }); } $(this).toggleClass('.expanded') }); });
解决方法
我不知道这是否是你想要做的事情,但在视觉上它是有效的.
HTML
<div class="item-list"> <ul> <li class="article"> <div class="column"> Column 1<br/> <a href="#" class="expand">toggle</a><br/> </div> <div class="column expandableColumn"> <p>Column 2 content</p> </div> </li> </ul> </div>
JS
$(document).ready(function() { $('.expandableColumn p').hide(); $('.expand').click(function() { if ($(this).hasClass('.expanded')) { $('.expandableColumn').animate({ 'width': '0px' }); $('.expandableColumn p').hide(); } else { $('.expandableColumn').animate({ 'width': '100px' }); $('.expandableColumn p').show(); } $(this).toggleClass('.expanded') }) });
我用一个< p>包裹了第2列文本,然后添加了一个hide()和show()(你可以执行切换或者其他任何事情,这只是快速完成),在你改变另一个的宽度时触发DIV.
似乎在Safari中如何工作.
这是fiddle.