Question

我有一些使用列表创建的HTML Post-It笔记，我想点击其中一个Post-It笔记，将其放大到其他所有笔记。当所有Post-It笔记以完全相同的方式设置样式时，这可以正常工作，但是当我对nth-child（偶数）应用更改时，它们不能按我的意愿工作。

css的开头：

.sticky-notes ul li:nth-child(even) {
-o-transform:rotate(4deg);
-webkit-transform:rotate(4deg);
-moz-transform:rotate(4deg);
position:relative;
top:5px;
}

jQuery函数：

$(".sticky-notes ul li").bind('click', function() {
var that = $(this),
offsets = that.position(),
top = offsets.top,
left = offsets.left,
clone = that.clone(),
parent = that.parent(),
width = parent.width(),
height = parent.height();

clone.addClass('clone').appendTo(parent).css({
'top': top,
'left': left
}).animate({
'top': 0,
'left': 0,
'width': width,
'height': height
}, 1000).click(

function() {
$(this).fadeOut().siblings().animate({
    'opacity': 1
}, 1000);
}).siblings().animate({
    'opacity': 0.1
}, 1000);

});

我在JS Fiddle上放了一个不起作用的版本的示例 - JS Fiddle

如果你拿出CSS的第47-95行，你会看到它们应该如何工作但是没有我需要的旋转和颜色。

我使用nth-child应用更改的原因是因为我正在从数据库中动态填充Post-It注释的内容 - 因此我无法对每个列表项应用不同的样式，因为只有一个HTML代码中的列表项（我为JS Fiddle示例编写了4个列表项）

css nth-child防止jquery函数正常工作

0 个答案: