Question

我在这里有三个可排序的列表，但是当他们的位置发生变化时，我不希望他们的属性发生变化。例如，我可以防止他们的颜色发生变化，但不能用{{{{{{ 1}}我使用z-index来执行此操作是我的代码http://codepen.io/anon/pen/pvEdMw

HTML

nth-child

CSS

<ul>
<li>aaa</li>
<li>aaaasdsd</li>
<li>fgf</li>
</ul>

JQuery的

li{
position:relative;
background-color:orange;
}

li:nth-child(1){
box-shadow:2px 2px 2px black;
z-index:3;
color:red;
}

li:nth-child(2){
box-shadow:2px 2px 2px black;
z-index:2;
color:blue;
} 

li:nth-child(3){
box-shadow:2px 2px 2px black;
z-index:1;
color:green;
}

Answer 1

jquery-ui 的

sortable函数也使用z-index。它直接修改元素的style，并设置覆盖您的样式的z-index。

修复该问题的一种方法是使用!important上的z-index。

li:nth-child(1){
  box-shadow:2px 2px 2px black;
  z-index:3 !important;
  color:red;
}

但我真的不喜欢!important的使用，因为它可能会破坏你的其他规则，并会使你的css代码难以维护。

另一种方法是挂钩stop回调并清理z-index插件设置的sortable。

$('ul').sortable({
  stop: function( event, ui ) {
    $(this).find('li').css('z-index','');
  }
});

z-index与nth-child无法正常工作

1 个答案: