我在 safari 中遇到包含 2 个 float 元素的 div 的宽度问题。
其中一个 float 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 .
关于javascript - safari 中 float 元素父容器的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13824415/