我写了一个显示 div 列表的页面。当我点击任何元素时,该元素将显示在左 Angular (左:0;上:0;)。如果您检查我的 fiddle ,请单击第一项,我希望其他元素将准确显示第一项的位置。请帮忙。
$(document).ready(function () {
var li = $('#list li');
$(li).on('click', function () {
$(".big").not(this).removeClass("big");
$(this).toggleClass("big");
});
});
更新:我还希望它们在我再次单击返回时返回到原来的位置。
最佳答案
我通过在您希望 float li 所在的位置创建一个虚拟 li 元素来解决您的问题。然后将其设置为打开的 li 的高度,从而获得放置在左上角的绝对位置。
添加position:absolute;
至 ul li.big
现在我们要创建一个虚拟 <li class="placeholder"></li>
在<ul id="list">
之后
给它CSS定义
ul li.placeholder {
display:none;
height:200px;
width:500px;
}
并添加到您的点击事件函数中:
if($(this).hasClass("big"))
$('ul li.placeholder').css('display','block').height($(this).height());
else
$('ul li.placeholder').css('display','none');
当然这需要一些调整(由于过渡效果,高度计算不正确),但它应该为您指明正确的方向。
关于javascript - 单击时如何使元素始终 float 在顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22756930/