我正在尝试获得类似于 http://www.nokiausa.com/us-en/products/ 中找到的效果。带有基本信息网格，单击即可扩展相邻项目的信息。
我遇到的一个问题是，扩展我的 div 会使相邻的 div 移动 - 我想我可能必须使用克隆函数来生成具有绝对定位的子项，但我不确定我实际上会如何做到这一点.
<head>
<script src="jquery-1.7.min.js"></script>
<script src="jquery.color.min.js"></script>
<script type="text/javascript">
function growRight(){
$('#stuff1').animate({
backgroundColor: "#FF8600"
}, 750 );
$('#stuff1').animate({
width: "510px"
}, 750, function() {});
}
</script>
<style>
ul{
display:block;
width:520px;
background-color:#888888;
}
li{
position:relative;
overflow:hidden;
display:block;
float:left;
height:250px;
width:250px;
background-color:#B8B8B8;
margin:5px;
}
p{
display:block;
}
div.contentright{
position:absolute;
top:0px;
left:250px;
width:260px;
height:250px;
}
.clearLeft{
clear:left;
}
</style>
</head>
<body>
<ul id="gridbox">
<li class="stuff" id="stuff1">
<a href="javascript:growRight()">Stuff 1</a>
<div class="contentright">
This is a load of content. Content content content.
</div>
</li>
<li>
Stuff 2
</li>
<li>
Stuff 3
</li>
<li>
Stuff 4
</li>
</ul>
</body>
最佳答案
在我看来，这需要巧妙地使用position:absolute。 z-index 仅设置首先出现在彼此之上的元素的顺序。
关于jquery - 使用 jQuery 扩展 div，而不移动 float 到其上的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8219486/