safari中浮动元素的父容器的宽度
safari中浮动元素的父容器的宽度
提问于 2012-12-12 00:33:10
我在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')
});
});回答 2
Stack Overflow用户
回答已采纳
发布于 2012-12-12 01:06:33
我不知道这是不是你想要做的事情，但从视觉上看，它是有效的。
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>包住了第二列的文本，然后添加了一个hide()和show() (你也可以做切换或其他任何事情，这是很快的事情)，在你改变另一个div的宽度时触发。
在Safari中看起来像你想要的那样工作。
这是fiddle。
Stack Overflow用户
发布于 2012-12-12 01:16:01
通过同时展开和折叠li包装器，我能够让它工作起来：
$(document).ready(function() {
$('.expand').click(function() {
if ($(this).hasClass('.expanded')) {
$('.article').animate({
'width': '100px'
});
$('.expandableColumn').animate({
'width': '0px'
});
}
else {
$('.article').animate({
'width': '200px'
});
$('.expandableColumn').animate({
'width': '100px'
});
}
$(this).toggleClass('.expanded')
})});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13824415
复制相关文章
相似问题
腾讯云开发者
